发表新帖
发表新帖

Load event for iFrame not fired in IE

前端 未结
关注
7 1497
无人及你
无人及你 2020-12-09 02:46

Why is the load event not fired in IE for iFrames?

Please take a look at this example.

Work perfectly as expected in FF and Chrome, but IE fails

相关标签:
7条回答
  • 伪装坚强ぢ
    2020-12-09 03:25

    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 loaded i1:

    Fred the fox.

    /eb_mce_iframe_content.html actually loaded x:

    Fred the fox.

    0 讨论(0)
  • 清酒与你
    2020-12-09 03:28

    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');
    0 讨论(0)
  • 面向向阳花
    2020-12-09 03:32

    I uses readystatechange event for IE. 

    var $iframe = $("<iframe>");
$iframe.on("load readystatechange", callback);
    0 讨论(0)
  • 借酒劲吻你
    2020-12-09 03:38

    Using the JavaScript code with jQuery from here works if you change the if ($.browser.safari || $.browser.opera) { line to if ($.browser.safari || $.browser.opera || $.browser.msie) {. So you have the following:

    $(function(){

    var iFrames = $('iframe');

    function iResize() {

        for (var i = 0, j = iFrames.length; i < j; i++) {
          iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
        }

        if ($.browser.safari || $.browser.opera || $.browser.msie) { 

           iFrames.load(function(){
               setTimeout(iResize, 0);
           });

           for (var i = 0, j = iFrames.length; i < j; i++) {
                var iSource = iFrames[i].src;
                iFrames[i].src = '';
                iFrames[i].src = iSource;
           }

        } else {
           iFrames.load(function() { 
               this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
           });
        }

    });
    0 讨论(0)
  • 栀梦
    2020-12-09 03:39

    Seis's answer is the correct one, and can be improved to use non-global/anonymous functions.

    window.dummy_for_ie7 = function() { }
var iframe = $('<iframe onload="dummy_for_ie7" />')[0];
iframe.attachEvent('onload', real_event_handler)

    To my surprise, this works.

    Note: iframe.onload = func() would NOT work, even after that hack. You MUST use attachEvent. Go figure.

    Note: naturally, this code verbatim will not work in standard-compliant UAs.

    0 讨论(0)
  • 无人及你
    2020-12-09 03:43

    Add the prefix "iframe" in front of your id:

    $('iframe#myFrame').load(function() {
  ...
});

    Alternativly try to use "ready" instead of "load":

    $('#myFrame').ready(function()  {
    alert("Loaded");
});

    This should work.

    0 讨论(0)
 看不清?
提交回复
热议问题