IE 中未触发 iFrame 的加载事件答案

【问题标题】：Load event for iFrame not fired in IEIE 中未触发 iFrame 的加载事件
【发布时间】：2010-12-02 11:36:17
【问题描述】：

为什么 iFrame 的 IE 中没有触发 load 事件？

请看this example。

在 FF 和 Chrome 中按预期完美运行，但 IE 失败。

【问题讨论】：

标签： jquery internet-explorer iframe load

【解决方案1】：

我认为对于 Internet Explorer 中的 iframe，您无法以编程方式设置事件处理程序（onload），您需要在标记中指定它。

类似：

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

否则 IE 将忽略该功能。

【讨论】：

顺便说一句。 jQuery 绑定事件在 FF 中也不适用于我，指定 onload 按预期工作
我似乎无法让它适用于 IE10。 onload="alert('moo');" 不提醒。

【解决方案2】：

在您添加处理程序之前，IE 可能已经加载了内容（并触发了事件）。我发现当我静态指定 iframe src attr，并通过 jquery 添加 $(x).load 事件处理程序时，firefox (3.6.28) 触发了我的处理程序，但 IE (8.0.6001.18702) 没有。

我最终调整了我的测试程序，以便在添加 $(x).load 处理程序后通过 javascript 设置 iframe src。我的 $(x).load 处理程序在 IE 和 Firefox 中的相同点被调用（但请注意，通过 iframe onload 属性添加的处理程序在 IE 和 FF 之间的行为不同）。这是我最终得到的结果：

<!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>

...这里是 Firefox 的“日志”：

i1/eb_mce_iframe_content.html 实际加载 i1：

狐狸弗雷德。

/eb_mce_iframe_content.html 实际加载 x：

狐狸弗雷德。

【讨论】：

【解决方案3】：

将处理程序直接分配给 onload 在 Chrome、FF 和 IE 中工作（已使用 IE 8 测试）。

(function (selector) {
    var frame = $(selector).get(0);

    if (frame) {
        frame.onload = function () {
            alert('frame loaded.');
        };
    }
})('#myframe');

【讨论】：

【解决方案4】：

如果您将if ($.browser.safari || $.browser.opera) { 行更改为if ($.browser.safari || $.browser.opera || $.browser.msie) {，则使用here 中的带有jQuery 的JavaScript 代码可以工作。所以你有以下内容：

$(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';
           });
        }

    });

【讨论】：

适用于 >= IE7 和 Chrome。我没有检查其他浏览器。谢谢！

【解决方案5】：

我为 IE 使用 readystatechange 事件。

var $iframe = $("<iframe>");
$iframe.on("load readystatechange", callback);

【讨论】：

适用于 ie 11！

【解决方案6】：

在您的 id 前添加前缀“iframe”：

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

或者尝试使用“ready”而不是“load”：

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

这应该可行。

【讨论】：

谢谢，但是在加载 iFrame 的内容之前会触发 'ready' 事件...
在选择器中将其指定为iframe 的建议是没有逻辑的。假设是什么——它会被更多人选中？至于这如何等同于ready 事件……令人难以置信。
就绪事件在 iframe 文档上无效，见dev.jquery.com/ticket/5511

【解决方案7】：

Seis 的答案是正确的，并且可以改进为使用非全局/匿名函数。

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

令我惊讶的是，这行得通。

注意：iframe.onload = func() 将无法正常工作，即使是在 hack 之后。您必须使用 attachEvent。去图吧。

注意：自然，此代码逐字在符合标准的 UA 中不起作用。

【讨论】：