首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >onload与addEventListener('load')的iframe行为

onload与addEventListener('load')的iframe行为
EN

Stack Overflow用户
提问于 2011-03-07 22:26:52
回答 2查看 52.2K关注 0票数 21

我一直在尝试将隐藏的iframe元素添加到页面中,我想在加载后操作这些元素的DOM。我已经注意到,在将iframe添加到页面之后,我不能立即开始操作DOM,因为它还没有加载。这不能用DOMContentLoaded事件来完成,因为在文档添加到页面之前,它会触发在iframe中不存在的文档,所以我们必须使用load事件。

下面是一些测试代码:

代码语言:javascript
复制
var iframe = document.createElement('iframe');
iframe.onload = function() { console.log('loaded!'); };
document.getElementsByTagName('body')[0].appendChild(iframe);

这与预期的一样,但是当我将其更改为addEventListener时,它甚至没有添加到DOM中:

代码语言:javascript
复制
var iframe = document.createElement('iframe');
iframe.addEventListener('load', function() { console.log('loaded!'); });
document.getElementsByTagName('body')[0].appendChild(iframe);

我还没有在IE中测试过attachEvent

有没有人对此有什么看法?

EN

回答 2

Stack Overflow用户

发布于 2011-05-24 00:05:48

这对我很有效:

html:

代码语言:javascript
复制
iframe source code: <br />
<textarea id="output" rows="20" cols="60">loading ...</textarea>

javascript (在documentReady上):

代码语言:javascript
复制
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,当然只能在同一个域上。

票数 1
EN

Stack Overflow用户

发布于 2011-03-07 23:29:30

第一个示例有效吗?不确定您到底在寻找什么,但这应该可以说明事件何时工作: jQuery document.ready源

$(document).ready equivalent without jQuery

addEventListener不能在IE中工作,所以如果这就是你要测试的地方,那么在附加iframe之前,第二个就会失败。

您还可以从页面本身添加一个回调(例如,使用jQuery,这样您就不会重复发明轮子),我怀疑$(iframe).ready() {..}将为您提供一致的行为。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5220840

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档