Load event for iFrame not fired in IE Load event for iFrame not fired in IE jquery jquery

Load event for iFrame not fired in IE


I think for iframes in Internet Explorer you can't set that event handler (onload) programmatically, you need to specify it in your markup.

Something like:

<iframe id="myFrame" onload="myFunction();"></iframe>

Otherwise IE is just going to ignore the function.


IE might have already loaded the content (and fired the event) before you add the handler. I found that when I statically specified the iframe src attr, and added $(x).load event handlers via jquery, firefox (3.6.28) triggered my handlers but IE (8.0.6001.18702) didn't.

I ended up adjusting my test program so that it set the iframe src via javascript after adding the $(x).load handler. My $(x).load handler was called at the same points in IE and Firefox (but note a handler added via iframe onload attribute behaved differently between IE and FF) . Here is what I ended up with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="X-UA-Compatible" content="IE=Edge"><script type="text/javascript" src="jquery-ui/js/jquery-1.6.2.min.js"></script><script language="javascript">function show_body(name, $iframe) {  $('.log').append(name+': '+$iframe.contents().find('body').html()+'<br/>');}function actuallyLoaded(name, x) {  $('.log').append(name+' actually loaded<br/>');}$(document).ready(function(){  $('.i1').load(function(){show_body('i1', $('.i1'));});  $('.i1').attr('src', 'eb_mce_iframe_content.html');  var $x=$('.i1').clone().removeClass('i1');  $('body').append($x);  $x.load(function(){show_body('x', $x);});  $x.attr('src', 'eb_mce_iframe_content.html');});</script></head><body><iframe class="i1" onload="actuallyLoaded($(this).attr('class')+'/'+$(this).attr('src'), this);"></iframe><div class="log"></div></body></html>

... and here was the Firefox "log":

i1/eb_mce_iframe_content.html actually loadedi1:

Fred the fox.

/eb_mce_iframe_content.html actually loadedx:

Fred the fox.


Assigning the handler directly to onload works in Chrome, FF, and IE (tested with IE 8).

(function (selector) {    var frame = $(selector).get(0);    if (frame) {        frame.onload = function () {            alert('frame loaded.');        };    }})('#myframe');