为页面上的每个 iFrame 添加 `load` 事件答案

【问题标题】：add `load` event for EVERY iFrame on a page为页面上的每个 iFrame 添加 `load` 事件
【发布时间】：2018-09-11 05:28:39
【问题描述】：

我有一个在其中动态添加 iFrame 的页面。我想为每个 iFrame 捕获“onLoad”事件。

所以基本上，我想将事件附加到正文，但让它适用于每个子 iFrame。这适用于其他事件，但似乎“加载”事件没有传播。

这是我迄今为止尝试过的：

$(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.");
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

它在 jsfiddle 上： https://jsfiddle.net/skeets23/qsrf802z/8/

有什么方法可以按预期工作吗？所以我可以只创建一个绑定并让它适用于任意数量的动态添加的 iFrame？

【问题讨论】：

Event binding on dynamically created elements?的可能重复
@peeebeee 不，我希望就这么简单。引用我的问题：“这适用于其他事件，但似乎“加载”事件没有传播。”
是的，我撤回了我的旗帜。

标签： javascript jquery events iframe

【解决方案1】：

似乎您想动态添加 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>

【讨论】：

非常好！我不知道“DOMNodeInserted”事件。谢谢。

【解决方案2】：

将$(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>

【讨论】：

一个好主意，但这里的想法是以后可能会动态添加 iFrame。所以代码需要保持它的顺序（首先绑定，接下来附加 iFrame）我问的可能是不可能的......：/