gpt4 book ai didi

javascript - window.onload 在 iframe 中调用了两次

转载 作者:太空宇宙 更新时间:2023-11-04 14:02:24 24 4
gpt4 key购买 nike

我正在 iframe 上测试事件,我遇到了一些非常奇怪的事情。我四处寻找有同样问题的其他人,但没有找到完全符合这些特征的人。

我有一个包含 iframe 的页面:

<!-- index.html -->
<body>
<h1>Parent</h1>
<h4><a href="index2.html">...go to the 2nd page...</a></h4>
<iframe src="iframe.html"></iframe>

<script type="text/javascript">
window.addEventListener('load', function(){
console.log('parent loaded');
});
</script>

</body>

和 iframe:

<body>
<h1>Iframe</h1>
<script type="text/javascript">
var i = 0;
window.addEventListener('load', function(){
window.top.console.log('iframe loaded', i++);
document.body.innerHTML += '<h3>loaded</h3>';
});
</script>
</body>

当我加载页面时,iframe 上的 onload 事件运行了两次,更奇怪的是,看起来 iframe 本身被加载了两次,因为 <h3>loaded</h3>元素控制台看起来像这样(变量 i 是两次“0”):

iframe loaded 0     iframe.html:11
parent loaded (index):13
iframe loaded 0 iframe.html:11

更奇怪的是,如果我没有在父文件上附加 onload 事件,iframe 的 onload 会正确运行,只有一次。

如果您想不受干扰地运行它,请转至 http://sureshots.andrepadez.com/iframetest/

我需要知道我是否做错了什么,或者这是一个已知问题,我该如何解决。

最佳答案

当您修改 body.innerHTML 属性时,会导致重新考虑整个 body 元素。 iframe 元素实际上从 DOM 中移除并再次插入,导致它加载两次。

违规行:

document.body.innerHTML += '<h3>loaded</h3>';

关于javascript - window.onload 在 iframe 中调用了两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25066052/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com