jquery timing issue with iFrames?

Question

I am trying to remove scrollbars from all iFrames on a page using jQuery.

I am using the code below for that:

$("iframe").each(function() { 
                         $(this).css({"overflow":"hidden","scrolling":"no"});
                    });

The problem is that as I keep refreshing the page sometimes it works and sometimes it doesn't which makes me believe there is some sort of a timing issue here. Perhaps the iFrames have not been loaded yet when the code above runs? Perhaps adding time delay?

The code is wrapped inside $(document).ready(function() handler

have you wrapped code inside ready handler or set it after iframes were added to the DOM? — A. Wolff, Dec 12 '13 at 14:52
are the iframes added in the static html, or is the content added using javascript? — Enermis, Dec 12 '13 at 14:54

score 0 · Answer 1 · answered Dec 12 '13 at 14:53

0

Try this

$(document).ready(function(){
   $("iframe").each(function() { 
      $(this).load(function(){
             $(this).css({"overflow":"hidden","scrolling":"no"});
      }
    });
});

EDITED

answered Dec 12 '13 at 14:53

Rickert

1,677
1
16
23

adeneo · Accepted Answer · 2013-12-12T15:04:32.963

0

Setting the styles and attribute with javascript simply doesn't work at all, so your only option is to set it without javascript

<iframe src="http://url.com" style="overflow:hidden" scrolling="no"></iframe>

FIDDLE

edited Dec 12 '13 at 15:04

answered Dec 12 '13 at 14:55

adeneo

312,895
29
395
388

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

The problem is that you are probably loading the content of the iframes using javascript as well. since javascript is single threaded by design, the load of the content of the iframe will be delayed until after the rest of the javascript is executed.

You should add the function as a callback when you load the content in the iframe

A similar question has been answered here jQuery .ready in a dynamically inserted iframe

edited May 23 '17 at 10:25

Community

1
1

answered Dec 12 '13 at 14:56

Enermis

679
1
5
16

Makes sense, how do I do that? Can you give me an example please? – Joly Dec 12 '13 at 15:00
what user2348221 suggested was correct. for more info you can check here. http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe – Enermis Dec 12 '13 at 15:03

score 0 · Answer 4 · answered Dec 12 '13 at 15:00

0

Why use jQuery/JavaScript at all?

Simple CSS can turn it off

iframe {
    overflow: hidden;
}

No looping, no worrying if they are dynamic, it should just work. And if you need to enable it, make another rule with a class and turn on the scrolling.

answered Dec 12 '13 at 15:00

epascarello

204,599
20
195
236

jquery timing issue with iFrames?

4 Answers4