动态创建的iframe触发onload事件两次
我动态创建了一个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？
回答 7
Stack Overflow用户
发布于 2013-04-08 21:33:40
我也遇到了同样的问题，但在任何地方都得不到答案，所以我自己测试了一下。
如果在将iframe附加到正文之前附加onload事件，则iframe onload事件将在webkit浏览器( safari/chrome )中触发两次。
因此，您可以通过以下方式更改您的代码来防止iframe onload两次。
document.body.appendChild(ifr);
ifr.onload=frameOnload; // attach onload event after the iframe is added to the body然后，您将只获得一个onload事件，这是文档真正加载的事件。
Stack Overflow用户
发布于 2016-07-19 21:10:59
要对投票最多的答案进行扩展，请执行以下操作：如果您无法控制何时以及如何将内容附加到DOM --例如，在使用框架时(我们已经在我们的Angular应用程序中实现了这一点) --您可能想尝试下面的解决方案。
我做了大量的跨浏览器测试，我发现了以下解决方法：检查传递给的参数onload回调和检查evt.target.src在事件侦听器中。
iframe.onload = function(evt) {
if (evt.target.src != '') {
// do stuff
}
}(如果从HTML调用全局方法，请记住传递event在HTML标记中：)
</code>)</p> <p><code>evt.target.src</code> can be be <code>''</code> (empty string) only in webkit in the first <code>onload</code> call, from my tests. </p> <h1><em>Study of iframe onload behavior in different situations</em></h1> <pre><code>iframe.onload = function(evt){ console.log("frameOnload", ++i); console.log("src = '" + evt.target.src + "'"); }; </code></pre> <h2>iframe onload behavior with regular URL</h2> <pre><code>// 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/"; </code></pre> <h2>iframe onload behavior with 404 URL</h2> <pre><code>// 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"; </code></pre> <h2>iframe onload behavior with non-resolvable (at DNS level) URL</h2> <pre><code>// Chrome: onload 1 src='', onload 2 src=requestedSrc // IE11: onload 1 src=requestedSrc // Firefox: onload NEVER triggered! document.body.appendChild(iframe); iframe.src= 'http://aaaaaaaaaaaaaaaaaaaaaa.example/'; </code></pre> <h2>iframe onload behavior with <code>iframe.src</code> explicitly set to <code>about:blank</code> before appending to DOM</h2> <pre><code>// Chrome: onload 1 src='about:blank', onload 2 src=requestedSrc // IE11: onload 1 src=requestedSrc // Firefox: onload 1 src=requestedSrc iframe.src = "about:blank"; document.body.appendChild(iframe); iframe.src = "http://www.example.org/"; </code></pre> <h2>iframe onload behavior with <code>iframe.src</code> explicitly set to a javascript expression before appending to DOM</h2> <pre><code>// Chrome: onload 1 src='javascript:void 0', onload 2 src=requestedSrc // IE11: onload 1 src=requestedSrc // Firefox: onload 1 src=requestedSrc iframe.src = "javascript:void 0"; document.body.appendChild(iframe); iframe.src = "http://www.example.org/"; </code></pre>
Stack Overflow用户
发布于 2018-11-29 18:15:46
我曾经在异步加载的样式表中遇到过这种情况，就像这个样式表一样。
我发现最简单的解决方案是删除事件本身：
https://stackoverflow.com/questions/10781880
复制相似问题