I'm testing events on an iframe and i came across something quite weird. I have looked around for other people with the same problem but found none exactly with these characteristics.
I have a page that contains an 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>
and the 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>
When i load the page, the onload event on the iframe is run twice and, more weird even, it looks like the iframe itself is being loaded twice because the <h3>loaded</h3> element the console looks like this (the variable i is twice '0'):
iframe loaded 0 iframe.html:11
parent loaded (index):13
iframe loaded 0 iframe.html:11
To add to the weirdness, if i don't attach the onload event on the parent file, the iframe's onload runs correctly, only once.
If you want to run it without interference just go to /
I need to know if i'm doing something wrong or if this is a known issue and how can i fix it.
I'm testing events on an iframe and i came across something quite weird. I have looked around for other people with the same problem but found none exactly with these characteristics.
I have a page that contains an 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>
and the 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>
When i load the page, the onload event on the iframe is run twice and, more weird even, it looks like the iframe itself is being loaded twice because the <h3>loaded</h3> element the console looks like this (the variable i is twice '0'):
iframe loaded 0 iframe.html:11
parent loaded (index):13
iframe loaded 0 iframe.html:11
To add to the weirdness, if i don't attach the onload event on the parent file, the iframe's onload runs correctly, only once.
If you want to run it without interference just go to http://sureshots.andrepadez./iframetest/
I need to know if i'm doing something wrong or if this is a known issue and how can i fix it.
Share Improve this question asked Jul 31, 2014 at 18:09 André Alçada PadezAndré Alçada Padez 11.6k26 gold badges71 silver badges128 bronze badges1 Answer
Reset to default 8When you modify the body.innerHTML property, it causes the entire body element to be reconsidered. The iframe element is effectively removed from the DOM and is inserted again, causing it to load twice.
The offending line:
document.body.innerHTML += '<h3>loaded</h3>';