Javascript 动态创建 iframe 并将 onload 事件附加到它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6183737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically create an iframe and attach onload event to it
提问by sushil bharwani
I have created a iframe dynamically and added a srcattribute to it. Then I have appended this iframe to body of the page. Know I want to attach an onloadevent to iframe to read the iframe content. Can somebody suggest how do I do that?
我动态创建了一个 iframe 并src为其添加了一个属性。然后我将这个 iframe 附加到页面的正文中。知道我想将onload事件附加到 iframe 以读取 iframe 内容。有人可以建议我该怎么做吗？
frame = document.createElement('iframe');
frame.setAttribute('src','http://example.com');
body.appendChild(frame);
frame.onload = function(){
alert('hi'); // here I want to read the content in the frame.
}
回答by Asaf
Some browsers do have the onload event for an iframe, first you should try to attach it before setting the iframe's src attribute.
一些浏览器确实有 iframe 的 onload 事件，首先你应该在设置 iframe 的 src 属性之前尝试附加它。
I'd avoid using it altogether since in certain browsers it might not fire under certain conditions (e.g. the target was in cache in IE).
我会完全避免使用它，因为在某些浏览器中它可能不会在某些条件下触发（例如目标在 IE 中的缓存中）。
You could user a timer to check if the frame's contentWindow's readystate is complete
您可以使用计时器来检查框架的 contentWindow 的就绪状态是否已完成
var inter = window.setInterval(function() {
if (frame.contentWindow.document.readyState === "complete") {
window.clearInterval(inter);
// grab the content of the iframe here
}
}, 100);
回答by Mauvis Ledford
I just tried this and it worked in Chrome:
我刚试过这个，它在 Chrome 中工作：
var iframe = document.createElement('iframe');
// append iframe to DOM however you like then:
iframe.contentWindow.parent.location.href // properly gives parent window's href.
W3school says contentWindowis supported in all major browsers.
W3school 表示contentWindow所有主要浏览器都支持。
回答by Tyler Rick
You can add a loadeventlistener to the iframe's contentWindow, which is just like any other Window.
您可以将load事件侦听器添加到 iframe 的contentWindow，就像任何其他Window 一样。
Here's an example:
这是一个例子：
iframe = document.createElement('iframe')
iframe.setAttribute('src', 'https://example.com/')
document.getElementsByTagName('body')[0].appendChild(iframe)
const onLoaded = function() {
console.log('iframe loaded');
}
if (iframe.contentWindow.document.readyState === 'complete') {
console.log('already loaded')
onLoaded()
} else {
iframe.contentWindow.addEventListener('load', onLoaded)
}
回答by Anze Jarni
I doubt you can attach an onload event to an iframe. It will not work on all browsers. You can on the other hand check if the iframe was loaded by:
我怀疑您是否可以将 onload 事件附加到 iframe。它不适用于所有浏览器。另一方面，您可以检查 iframe 是否通过以下方式加载：
window.onload=function()
{
var iframe=document.getElementById('myframe');
if(iframe)
alert('The iframe has just been loaded.');
}
Or use AJAX to load the content in your container. With AJAX you can set a proper load-complete event.
或者使用 AJAX 加载容器中的内容。使用 AJAX，您可以设置适当的加载完成事件。
