link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
乖乖的绿豆 · ReactNative的文件处理组件：rea ...· 1 年前 · |
|
|
独立的书签 · MessageFormat的用法,java动 ...· 1 年前 · |
|
|
踢足球的豌豆 · win10 uwp ...· 1 年前 · |
我动态创建了一个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
已采纳
得票数
65
我也遇到了同样的问题，但在任何地方都得不到答案，所以我自己测试了一下。
如果在将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 17:33
得票数
0
FWIW，而我可以复制两倍
onload
在以下情况下
iframe.src
是
javascript:
，我不能用普通的HTTP URL重现它(onload发生过一次)。但是，当您更改调用顺序时，
iframe.src
在附加到body之后设置，则会发生双重加载(同样，仅限webkit )：
var i = 0;
var iframe = document.createElement("iframe");
iframe.onload = function(){
console.log("frameOnload", ++i);
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/";
//iframe.src = "http://www.example.org/404";
// double onload!
当我分配
src
追加前，我得到了一个
onload
打电话。
var i = 0;
var iframe = document.createElement("iframe");
iframe.onload = function(){
console.log("frameOnload", ++i);
iframe.src = "http://www.example.org/";
//iframe.src = "http://www.example.org/404";
document.body.appendChild(iframe);
// only one onload
Stack Overflow用户
修改于2018-10-29 23:54
得票数
23
要对投票最多的答案进行扩展，请执行以下操作：如果您无法控制何时以及如何将内容附加到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
得票数
1
我曾经在异步加载的样式表中遇到过这种情况，就像这个样式表一样。
我发现最简单的解决方案是删除事件本身：
Stack Overflow用户
回答于2019-06-19 16:02
得票数
0
下面是运行良好的代码！
来源：@Dave Stolie https://coderanch.com/t/443223/languages/Frames-loading-refresh
function loadFrame()
var url="http://www.google.com";
alert(document.getElementById("theFrame").src);
if (document.getElementById("theFrame").src != url)
alert("loading");
document.getElementById("theFrame").src = url;
}
Stack Overflow用户
回答于2020-06-08 22:59
得票数
0
基于@jakub.g的答案：
从框架内部，
evt.target.src
hack不起作用。但我发现我可以改为检查
evt.target.title
..。第二次
DOMContentLoaded
会被触发
evt.target
指向正在加载的文档，所以这是可行的：
document.addEventListener('DOMContentLoaded', function(evt) {
if (evt.target.title !== myPageTitle) {
// Work around for Webkit browsers trigging this event twice om iframes
return
// DOM content loaded, for real
}
即使在Internet Explorer中，此行为似乎也是一致的(对于没有
.addEventListener
推荐文章