onload与ifEventListener('load')的iframe行为

ror*_*ryf 19 html javascript iframe onload-event

我一直在玩将隐藏的iframe元素添加到页面中,并且我希望在加载后操纵这些元素的DOM.我注意到,在将iframe添加到页面后,我无法立即开始操作DOM,因为它还没有加载.这不能用DOMContentLoaded事件来完成,因为它会触发iframe中不存在的文档,直到它被添加到页面中,因此我们必须使用该load事件.

这是一些测试代码:

var iframe = document.createElement('iframe');
iframe.onload = function() { console.log('loaded!'); };
document.getElementsByTagName('body')[0].appendChild(iframe);
Run Code Online (Sandbox Code Playgroud)

这按预期工作,但是当我将其更改为addEventListener它甚至没有添加到DOM:

var iframe = document.createElement('iframe');
iframe.addEventListener('load', function() { console.log('loaded!'); });
document.getElementsByTagName('body')[0].appendChild(iframe);
Run Code Online (Sandbox Code Playgroud)

我还没有attachEvent在IE中测试过.

有人对此有所了解吗?

Hra*_*ian 19

addEventListener()功能需要3个参数!看看https://developer.mozilla.org/en/DOM/element.addEventListener

第三个参数被标记为可选,但随后他们写道:

请注意,此参数在所有浏览器版本中都不是可选的.

我不确定它何时何地需要,但我在FF4上的测试在调用addEventListener带有2个参数时引发了异常:

未捕获的异常:[异常......"参数不够"nsresult:"0x80570001(NS_ERROR_XPC_NOT_ENOUGH_ARGS)"位置:"JS frame :: http://localhost/index.php :: :: line 10"数据:否]

顺便说一句,您的代码在Chrome中运行良好[字符串loaded!在控制台中记录].

像FF一样,IE9需要标准模式中的第3个参数(带<!DOCTYPE html>).IE9是第一个支持W3C事件模型的IE.所以在早期版本中我们需要尝试attachEvent.我没有早期的IE,但它在IE7/8标准模式下工作,甚至在IE9中的Quirks模式下工作.这是我使用的代码:

<!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>
Run Code Online (Sandbox Code Playgroud)