动态创建的iframe触发onload事件两次

Question

我动态创建了一个iframe，发现这个iframe触发onload事件两次。

var i=0;
frameOnload=function(){
  console.log(i++);  
};

var ifr=document.createElement("iframe");  
ifr.src="javascript:(function(){document.open();document.write('test');document.close();})();";
ifr.onload=frameOnload;  
document.body.appendChild(ifr);

为什么我终于是1？ 如何防止iframe的onload两次而不是将onload函数指向内部为null？

Answer 1

我也遇到了同样的问题，但在任何地方都没有答案，所以我自己测试了。

iframe onload事件将在webkit浏览器（safari / chrome）中触发两次，如果在iframe附加到正文之前附加onload事件。

因此，您可以通过以下方式更改代码来阻止iframe加载两次。

document.body.appendChild(ifr);
ifr.onload=frameOnload; // attach onload event after the iframe is added to the body

然后，您将只获得一个onload事件，这是文档真正加载的事件。

Answer 2

扩展最高投票答案：如果你无法控制事物附加到DOM的时间和方式 - 例如，当使用框架时（我们已经发生了这种情况）我们的Angular app） - 你可能想尝试下面的解决方案。

我进行了大量的跨浏览器测试，我找到了以下解决方法：检查传递给onload回调的参数并检查事件监听器中的evt.target.src。

iframe.onload = function(evt) {
    if (evt.target.src != '') {
        // do stuff
    }
}

（如果您从HTML调用全局方法，请记住在HTML标记中传递event：<iframe onload="window.globalOnLoad(event)">）

在我的测试中，

evt.target.src只能在第一个''调用的webkit中为onload（空字符串）。

研究不同情况下的iframe上传行为

iframe.onload = function(evt){
    console.log("frameOnload", ++i);
    console.log("src = '" + evt.target.src + "'");
};

使用常规网址

的iframe onload行为

// Chrome:  onload 1 src='', onload 2 src=requestedSrc
// IE11:    onload 1 src=requestedSrc
// Firefox: onload 1 src=requestedSrc
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/";

使用404网址的