Question

我一直在为页面添加隐藏的iframe元素，我想在加载后操纵这些元素的DOM。我注意到，在将iframe添加到页面后，我无法立即开始操作DOM，因为它还没有加载。使用DOMContentLoaded事件无法做到这一点，因为在将iframe添加到页面之前触发iframe中不存在的文档，因此我们必须使用load事件。 / p>

以下是一些测试代码：

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。

有人对此有所了解吗？

Answer 1

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

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

请注意，此参数不是所有浏览器版本均可选。

我不确定它何时何地需要，但我在FF4上的测试在用{2}参数调用addEventListener时引发了异常：

未被捕获的例外：[例外......“不是足够的论据“nsresult： “0x80570001 （NS_ERROR_XPC_NOT_ENOUGH_ARGS）” 位置：“JS框架:: http://localhost/index.php :: ::第10行“数据：否]

顺便说一下，您的代码在Chrome中效果很好[字符串loaded!已在控制台中记录。）

与FF一样，IE9需要标准模式中的第三个参数（使用<!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>

Answer 2

这对我有用：

HTML：

iframe source code: <br />
<textarea id="output" rows="20" cols="60">loading ...</textarea>

javascript（在documentReady上）：

var iframe = document.createElement('iframe');
iframe.id = iframe.name = "testframe";
iframe.src = "http://fiddle.jshell.net";
iframe.width = 400;
iframe.height = 100;
iframe.style.display = "none";

if (iframe.addEventListener)
    iframe.addEventListener("load", loaded, false);
else
    iframe.attachEvent("onload", loaded);

function loaded() {
    var html;
    if (iframe.contentDocument)
        html = iframe.contentDocument.getElementsByTagName("HTML")[0].innerHTML;
    else
        html = window.frames[iframe.name].document.getElementsByTagName("html")[0].innerHTML;

    document.getElementById("output").value = html;
}

document.getElementsByTagName("body")[0].appendChild(iframe);

请参阅演示：http://jsfiddle.net/WcKEz/

与addEventListener一起使用，但包括attachEvent的回退。当然，只能在同一个域上访问IFRAME的DOM。

Answer 3

第一个例子有效吗？不确定你正在寻找什么，但这应该说明事件何时起作用：jQuery document.ready source

$(document).ready equivalent without jQuery

addEventListener在IE中不起作用，所以如果你正在测试它，那么第二个会在iframe被追加之前失败。

你也可以从页面本身添加一个回调（例如，使用jQuery，所以你不要重新发明轮子）我怀疑$(iframe).ready() {..}会给你一致的行为。

onload与ifEventListener（'load'）的iframe行为

3 个答案: