Question

我在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>元素（变量）我是两次＆＃39; 0＆＃39;）：

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

为了增加奇怪性，如果我没有在父文件上附加onload事件，iframe的onload只能运行一次。

如果您想在不受干扰的情况下运行它，请转到http://sureshots.andrepadez.com/iframetest/

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

Answer 1

修改body.innerHTML属性时，会导致重新考虑整个body元素。 iframe元素有效地从DOM中删除并再次插入，导致它加载两次。

违规行：

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

window.onload在iframe内调用了两次

1 个答案: