onload与addEventListener('load')的iframe行为
onload与addEventListener('load')的iframe行为
提问于 2011-03-07 22:26:52
我一直在尝试将隐藏的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。
有没有人对此有什么看法？
回答 2
Stack Overflow用户
发布于 2011-05-24 00:05:48
这对我很有效：
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，当然只能在同一个域上。
Stack Overflow用户
发布于 2011-03-07 23:29:30
第一个示例有效吗？不确定您到底在寻找什么，但这应该可以说明事件何时工作: jQuery document.ready源
$(document).ready equivalent without jQuery
addEventListener不能在IE中工作，所以如果这就是你要测试的地方，那么在附加iframe之前，第二个就会失败。
您还可以从页面本身添加一个回调(例如，使用jQuery，这样您就不会重复发明轮子)，我怀疑$(iframe).ready() {..}将为您提供一致的行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5220840
复制相关文章
相似问题
腾讯云开发者
