在 javascript 或 jQuery 中检测 iframe 的负载（不同域，动态添加）？

Question

有没有办法检测何时在 javascript/jQuery 中加载 iframe？具备以下条件：

• 我无法控制 iframe。它是由另一个 javascript 插件添加的。
• 它指向另一个域（所以我想我不能使用相同域的解决方案）。
• 我不知道 iframe 加载的那一刻。我只是可以设置一个时间间隔并每次检查是否有 iframe 并尝试调用他的 load 事件（因此 iframe 被动态添加到 DOM）

我已经在其他问题中读到了这一点，但它们要么不完整，要么不假设这三个条件。

提前致谢。

对@Jaromanda X 的回答的补充：我需要在这个答案中添加一个选项来observer.observe(document.body, { childList: true });实现这个：observer.observe(document.body, { childList: true, subtree: true });。该子树的选择工作也为目标（这种情况下document.body的）的所有后代。

Answer 1

使用突变观察器检测 iframe 何时添加到 DOM，然后您只需添加一个load事件侦听器即可检测 iframe 何时加载

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        [].filter.call(mutation.addedNodes, function (node) {
            return node.nodeName == 'IFRAME';
        }).forEach(function (node) {
            node.addEventListener('load', function (e) {
                console.log('loaded', node.src);
            });
        });
    });
});
observer.observe(document.body, { childList: true, subtree: true });