我有一个页面，其中动态添加了 iFrame。我想捕获每个 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/
有什么方法可以让它按预期工作吗？那么我可以只创建一个绑定(bind)并让它适用于任意数量的动态添加的 iFrame 吗？
最佳答案
似乎你想动态添加 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>关于javascript - 为页面上的每个 iFrame 添加 `load` 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52269193/