onload vs addEventListener（'load'）的iframe行为 [英] iframe behaviour of onload vs addEventListener('load')
问题描述
我一直在为隐藏的iframe元素添加一个页面，并且我想操作这些加载的DOM的DOM。我注意到，在将iframe添加到页面后，我无法立即开始操作DOM，因为它尚未加载。这不能通过 DOMContentLoaded 事件完成，因为这会触发iframe中不存在的文档，直到它被添加到页面中，所以我们必须使用加载事件。
以下是一些测试代码：
var iframe = document.createElement（'iframe'）;
iframe.onload = function（）{console.log（'loaded！'）; };
document.getElementsByTagName（'body'）[0] .appendChild（iframe）;
这可以按预期工作，但是当我将它更改为 addEventListener 它甚至不会添加到DOM中：
var iframe = document.createElement（'iframe'） ;
iframe.addEventListener（'load'，function（）{console.log（'loaded！'）;}）;
document.getElementsByTagName（'body'）[0] .appendChild（iframe）;
我在IE中没有测试过 attachEvent 。
任何人对此有何看法？
addEventListener（）函数需要3个参数！查看 https://developer.mozilla.org/en/DOM/element.addEventListener
第三个参数被标记为可选，但他们写道：
请注意，在所有浏览器版本中，此参数不是
可选。
我不确定何时和在需要的地方，但我的FF4测试在使用2个参数调用 addEventListener 时抛出了一个异常：
未捕获的异常：[Exception ...不是
足够的参数nsresult：
0x80570001
（NS_ERROR_XPC_NOT_ENOUGH_ARGS）
location：JS frame ::
http：//localhost/index.php ::
::第10行数据：no]
顺便说一句，您的代码在Chrome中很好[字符串已加载！记录在我身上n
与FF类似，IE9需要标准模式中的第三个参数（<！DOCTYPE html> ）。 IE9是第一个支持W3C事件模型的IE。因此在早期版本中，我们需要尝试 attachEvent 。我没有更早的IE，但它在IE7 / 8标准模式下工作，甚至在IE9的怪癖模式下工作。以下是我使用的代码：
<！DOCTYPE html>
< html>
< head>< title>< / title>< / head>
< body>
< script>
window.onload = function（）{
var iframe = document.createElement（'iframe'）;
var func = function（）{console.log（'loaded！'）;};
if（iframe.addEventListener）
iframe.addEventListener（'load'，func，true）;
else if（iframe.attachEvent）
iframe.attachEvent（'onload'，func）;
document.body.appendChild（iframe）;
}
< / script>
< / body>
< / html>
I've been playing around with adding hidden iframe elements to a page, and I want to manipulate the DOM of the these once loaded. I've noticed that I can't start manipulating the DOM immediately after adding the iframe to a page since it hasn't loaded yet. This can't be done with the DOMContentLoaded event since that fires against the document which doesn't exist in the iframe until it is added to the page, so we have to use the load event.
Here is some test code:
var iframe = document.createElement('iframe');
iframe.onload = function() { console.log('loaded!'); };
document.getElementsByTagName('body')[0].appendChild(iframe);
This works as expected, however when I change it to addEventListener it doesn't even get added to the DOM:
var iframe = document.createElement('iframe');
iframe.addEventListener('load', function() { console.log('loaded!'); });
document.getElementsByTagName('body')[0].appendChild(iframe);
I haven't tested attachEvent in IE.
Anyone shed any light on this?
addEventListener() function needs 3 arguments! Take a look at https://developer.mozilla.org/en/DOM/element.addEventListener
The 3rd argument is marked as optional, but then they write:
Note that this parameter is not optional in all browser versions.
I'm not sure when and where it is required, but my tests on FF4 threw an exception when calling the addEventListener with 2 arguments:
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://localhost/index.php :: :: line 10" data: no]
By the way, your code works well in Chrome [the string loaded! is logged in console].
Like FF, IE9 needs the 3rd argument in the standards mode (with <!DOCTYPE html>). IE9 is the first IE that supports W3C's event model. So in the earlier versions we need to try attachEvent. I don't have earlier IEs, but it worked in IE7/8 Standards Mode and even in Quirks Mode in IE9. Here is the code I used:
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<script>
window.onload=function(){
var iframe = document.createElement('iframe');
var func = function() { console.log('loaded!');};
if(iframe.addEventListener)
iframe.addEventListener('load', func, true);
else if(iframe.attachEvent)
iframe.attachEvent('onload',func);
document.body.appendChild(iframe);
}
</script>
</body>
</html>
这篇关于onload vs addEventListener（'load'）的iframe行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
