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

Posted 2023-05-09

【中文标题】在javascript或jQuery中检测iframe的负载（不是同一个域，动态添加）？

【英文标题】：Detect load of iframe (not same domain, dynamically added) in javascript or jQuery?

【发布时间】：2017-06-12 13:47:00

【问题描述】：

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

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

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

提前致谢。

补充@Jaromanda X： 我需要在observer.observe(document.body, childList: true ); 中为这个答案添加一个选项，实际上是这样的：observer.observe(document.body, childList: true, subtree: true );。 子树选项也适用于目标的所有后代（本例为 document.body）。

【问题讨论】：

Mutation Observer 至少可以帮助检测何时创建 iframe 元素 - 然后您可以像往常一样向 iframe 添加加载事件侦听器...

【参考方案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 );

【讨论】：

谢谢，效果很好！只是为了记录，我需要在observer.observe(document.body, childList: true ); 中为这个答案添加一个选项，实际上是：observer.observe(document.body, childList: true, subtree: true );。子树选项也适用于目标的所有后代（本例为 document.body）。

你是对的 - 我在我使用的 MutationObserver 代码中有它（不是用于 iframe，用于其他东西）不知道我是如何错误地复制它的！我会把它添加到答案中

不幸的是，这个解决方案在 android WebView（基于 webkit）中不起作用。