为页面上的每个iFrame添加`load`事件
提问于 2018-09-11 05:28:39
我有一个动态添加iFrames的页面。我想为每个iFrame捕捉"onLoad“事件。
因此，基本上，我希望将事件附加到主体，但使其应用于每个子iFrame。这适用于其他事件，但看起来"load“事件不会传播。
这是我到目前为止尝试过的：
$(document).on("load", "iframe", function() {
$("body").append("this is what I want, but it doesn't work!");
});
var iFrame = $("<iframe/>", {
srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});
$("body").append(iFrame);
iFrame.on("load",function(){
$("body").append("this seems to work.... but isn't what I'm looking for.");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这里是jsfiddle：https://jsfiddle.net/skeets23/qsrf802z/8/
有没有办法让它像预期的那样工作？所以我可以只创建一个绑定，并让它对任意数量的动态添加的iFrames起作用？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-12 00:09:51
似乎你想动态添加iframe，所以，最好的方法是捕获文档的事件DOMNodeInserted。请参见以下示例：
$(document).on('DOMNodeInserted', function(e) {
//check is iframe is loaded
if(e.target.localName=="iframe"){
console.log("New iframe loaded!");
$("div").append("this does NOT seem to work!");
};
});
function addIframe(){
var iFrame = $("<iframe />", {
srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});
$("body").append(iFrame);
iFrame.on("load",function(){
$("div").append("this seems to work....");
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addIframe();">Add Iframe</button>
<div>
</div>
Stack Overflow用户
发布于 2018-09-11 06:15:10
将$(document).on("load" ...更改为$("iframe").on("load", ...。并把它放在脚本的末尾，它会起作用的！
var iFrame = $("<iframe />", {
srcdoc : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});
$("body").append(iFrame);
iFrame.on("load",function(){
$("div").append("this seems to work....");
//alert("cde");
});
$("iframe").on("load", function () {
$("div").append("this does NOT seem to work!");
alert("abc");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52269193
复制相关文章
点击加载更多
腾讯云开发者
