我一直在尝试将隐藏的iframe元素添加到页面中,我想在加载后操作这些元素的DOM。我已经注意到,在将iframe添加到页面之后,我不能立即开始操作DOM,因为它还没有加载。这不能用 DOMContentLoaded 事件来完成,因为在文档添加到页面之前,它会触发在iframe中不存在的文档,所以我们必须使用 load 事件。
DOMContentLoaded
load
下面是一些测试代码:
var iframe = document.createElement('iframe'); iframe.onload = function() { console.log('loaded!'); }; document.getElementsByTagName('body')[0].appendChild(iframe);
这与预期的一样,但是当我将其更改为 addEventListener 时,它甚至没有添加到DOM中:
addEventListener
var iframe = document.createElement('iframe'); iframe.addEventListener('load', function() { console.log('loaded!'); }); document.getElementsByTagName('body')[0].appendChild(iframe);
我还没有在IE中测试过 attachEvent 。
attachEvent
有没有人对此有什么看法?
上云精选
2核2G云服务器 每月9.33元起,个人开发者专属3年机 低至2.3折
第一个示例有效吗?不确定您到底在寻找什么,但这应该可以说明事件何时工作: jQuery document.ready源
$(document).ready equivalent without jQuery
addEventListener不能在IE中工作,所以如果这就是你要测试的地方,那么在附加iframe之前,第二个就会失败。
您还可以从页面本身添加一个回调(例如,使用jQuery,这样您就不会重复发明轮子),我怀疑 $(iframe).ready() {..} 将为您提供一致的行为。
$(iframe).ready() {..}
这对我很有效:
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); iframe.attachEvent("onload", loaded); function loaded() { var html; if (iframe.contentDocument) html = iframe.contentDocument.getElementsByTagName("HTML")[0].innerHTML;