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

EN

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

如果在将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事件，这是文档真正加载的事件。

要对投票最多的答案进行扩展，请执行以下操作：如果您无法控制何时以及如何将内容附加到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>

我曾经在异步加载的样式表中遇到过这种情况，就像这个样式表一样。

我发现最简单的解决方案是删除事件本身：