21

我一直在尝试向页面添加隐藏的 iframe 元素，并且我想在加载后操纵这些元素的 DOM。我注意到在将 iframe 添加到页面后，我无法立即开始操作 DOM，因为它尚未加载。这不能用DOMContentLoaded事件来完成，因为它会触发 iframe 中不存在的文档，直到它被添加到页面，所以我们必须使用load事件。

这是一些测试代码：

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);

我没有attachEvent在IE中测试过。

有人对此有所了解吗？

4

3 回答 3

23

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

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

请注意，此参数并非在所有浏览器版本中都是可选的。

我不确定何时何地需要它，但我在 FF4 上的测试在addEventListener使用 2 个参数调用时抛出了异常：

未捕获的异常：[异常...“没有足够的参数”nsresult：“0x80570001（NS_ERROR_XPC_NOT_ENOUGH_ARGS）”位置：“JS 框架 :: http://localhost/index.php :: :: line 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>
于 2011-05-23T17:14:53.923 回答
1

这对我有用：

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 当然只能在同一个域上。

于 2011-05-23T16:05:48.017 回答
0

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

$(document).ready 没有 jQuery 的等价物

addEventListener 在 IE 中不起作用，所以如果这是您正在测试的地方，那么第二个将在 iframe 被附加之前失败。

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

于 2011-03-07T15:29:29.910 回答