Javascript iframe onload与addEventListener的行为（'；load'；）_Javascript_Html_Iframe_Onload Event

Javascript iframe onload与addEventListener的行为（'；load'；）

javascript html iframe

Javascript iframe onload与addEventListener的行为（'；load'；）,javascript,html,iframe,onload-event,Javascript,Html,Iframe,Onload Event,我一直在尝试向页面中添加隐藏的iframe元素，我想在加载这些元素后操作它们的DOM。我注意到，在将iframe添加到页面后，我无法立即开始操作DOM，因为它还没有加载。这不能通过DOMContentLoaded事件来完成，因为它触发的文档在添加到页面之前不存在于iframe中，因此我们必须使用load事件下面是一些测试代码： var iframe = document.createElement('iframe'); iframe.onload = function() { console.

我一直在尝试向页面中添加隐藏的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);

我没有在IE中测试

attachEvent

有人对此有什么解释吗？

第一个例子有用吗？不确定您到底在寻找什么，但这应该会在事件工作时说明：jQuery document.ready source

addEventListener在IE中不起作用，因此如果您正在测试IE，那么在添加iframe之前，第二个将失败

您也可以从页面本身添加回调（例如，使用jQuery，这样您就不会重新发明轮子），但我怀疑

$（iframe）.ready（）{..}

会给您提供一致的行为。

这对我来说很有效：

html:

请参见以下网址的演示：

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

addEventListener（）

函数需要3个参数！看看

第三个参数标记为可选，但它们会写入：

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

我不确定何时何地需要它，但我对FF4的测试在调用带有2个参数的

addEventListener

时引发了一个异常：

未捕获异常：[异常…”不是足够的参数“nsresult: “0x80570001 （NS\u错误\u XPC\u参数不足）位置：“JS帧：： :: ：：第10行“数据：否]

顺便说一下，您的代码在Chrome中运行良好[字符串

已加载！

已登录到控制台]

与FF一样，IE9需要标准模式下的第三个参数（使用

）。IE9是第一个支持W3C事件模型的IE。因此，在早期版本中，我们需要尝试

attachEvent

。我没有早期的IEs，但它在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>


window.onload=function（）{
var iframe=document.createElement（'iframe'）；
var func=function（）{console.log（'loaded！'）；}；
if（iframe.addEventListener）
iframe.addEventListener（'load'，func，true）；
否则如果（iframe.attachEvent）
iframe.attachEvent（'onload'，func）；
document.body.appendChild（iframe）；
}

不能使用

ready

事件，因为这需要一个还不存在的文档，除非我遗漏了什么。我建议使用与jquery document.ready相同的逻辑，例如在iframe元素上，像这个插件那样：但仍然不清楚您的第一个代码段是否有问题，您是否正在尝试在加载图像之前挂接？或者，假设您控制iframe中的代码，您可以使用document.ready在那里使用parent回调函数。第一个代码段工作正常（如上所述），但是

onload

属性是非标准的（AFAIK），我只是想知道为什么标准兼容方式（忽略IE）不起作用。iframe本身并不指向另一个页面，我想将其加载为空白并填充DOM.onload似乎还可以：我有点错过了您动态构建整个页面的过程。看看这个。。。老了，但也许会有帮助。哈哈！很公平。。尽管我认为他的技术看起来很合理（作为测试访问文档的不同方式的一种方法）。这里有一篇更详细的博文，内容与一位似乎已从初中毕业的人所写的相同：。。。似乎没有任何干净的方法可以做到这一点。我相信你关于第三个参数的观点正是问题所在，我没有得到你所做的错误，但它可能只是被抑制了。我记不起来了，但很明显我没有在Chrome上测试它（愚蠢的我…）。很好，谢谢。

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

<!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>