Javascript：检测何时添加了带有src的iframe不可检索

给定的第三方脚本在特定条件下向DOM添加iframe。如果iframe加载正确，则所有操作都已完成。然而，有时，该iframe的src会导致404、网络超时或其他错误。第三方脚本无法优雅地处理此问题

我希望在我的脚本中监视这一点，并且每当iframe加载失败时，触发我的脚本。有没有办法做到这一点？它看起来像这样：

function callWhenElementFails(element) {
   if (element is_a iframe)
        invoke_my_handler;
   else
        do nothing
}

$('#iframe').on('load', function(){
   //your code will be called once iframe is done loading
});

一个更简单的问题：给定一个iframe元素，如何检查它是否已加载，或者是否失败？我可以在网络选项卡下的开发者工具中看到src失败了；如何以编程方式查询此问题

请注意，我的代码不是加载iframe的代码，修改第三方代码并向其中添加内容将很困难

努力解决类似问题，但没有成功

突变观察者可能是一种方法，尽管我希望更简单的方法会更好

function badIframe(iframe) {
    return new Promise(resolve => {
        // This uses the new Fetch API to see what happens when the src of the iframe is fetched from the webpage.
        // This approach would also work with XHR. It would not be as nice to write, but may be preferred for compatibility reasons.
        fetch(iframe.src)
            .then(res => {
                // the res object represents the response from the server

                // res.ok is true if the repose has an "okay status" (200-299)
                if (res.ok) {
                    resolve(false);
                } else {
                    resolve(true);
                }

                /* Note: it's probably possible for an iframe source to be given a 300s
                status which means it'll redirect to a new page, and this may load
                property. In this case the script does not work. However, following the
                redirects until an eventual ok status or error is reached would be much
                more involved than the solution provided here. */
            })
            .catch(()=> resolve(true));
    });
}

new MutationObserver(async records => {
    // This callback gets called when any nodes are added/removed from document.body.
    // The {childList: true, subtree: true} options are what configures it to be this way.

    // This loops through what is passed into the callback and finds any iframes that were added.
    for (let record of records) {
        for (let node of record.addedNodes) {
            if (node.tagName === `IFRAME` && await badIframe(node)) {
                // invoke your handler
            }
        }
    }
}).observe(document.body, {childList: true, subtree: true});

如果存在多个iframe，请使用querySelectorAll和for循环检查每个iframe的

iframes的title属性有这个值，我们可以使用它进行过滤，

---

iframeSelect.title/“第三方广告”

我不确定是否有一种有效的方法来检测iframe调用是否成功。但是你可以解决它

在网站上进行ajax调用。如果遇到CORS问题，请使用服务器端编写的代理加载网站，如PHP、Java、， 不管怎样，在代理Web服务上进行ajax调用

然后，您可以接收http状态代码，如果 里面有HTMLDOM。如果使用服务器端代理，则 需要传递http正文和状态代码

使用javascript动态加载iframe

使用此解决方案，您可以再提出一个请求，但它应该与您的需要相匹配，因为所有内容都是异步加载的，包括SETET iframe，因此所有内容都应该在不中断用户活动的情况下顺利加载。

您可以使用jQuery。on（'load'）函数如下所示：

function callWhenElementFails(element) {
   if (element is_a iframe)
        invoke_my_handler;
   else
        do nothing
}

$('#iframe').on('load', function(){
   //your code will be called once iframe is done loading
});

或者，如果您不想使用jQuery，而想使用vanilla js，您可以使用

window。onload

或只是

onload

取决于具体情况

如果加载了iframe，则需要检查

readyState

。

---

如果

readyState

已完成，则可以假设已加载iframe。

在我的测试中，如果帧加载错误或url无效，则可能存在一些包含id为“main frame error”和“sub fram error”的错误消息的div。因此，您可以使用document获取具有这些id的div，如果有的话，那么iframe将无法加载。您是否尝试使用xmlhttprequest自己检索iframe的内容并管理其响应？如果您喜欢，您可以使用检索到的内容创建/填充iframe，如果您不喜欢，只需调用您的处理程序（如果仍然需要）。在第三方代码有机会加载iframe之前，是否会立即触发此复制？只有当它失败时我们才需要抓住它。你能解释一下吗？我们需要在特定iframe加载失败时执行代码。从您的代码中不清楚您将在何处传递，或者在失败时将要执行的代码传递到何处。@SRobertJames如果您需要检测何时添加了iframe，请使用变异观察者。我刚加进去，谢谢！您能为我们这些不熟悉您使用的高级Javascript的人添加解释代码的注释吗？@SRobertJames如果您还有什么需要我注释的，请告诉我。我认为这不管用，因为iframe在DOM中还不存在。它是通过脚本的执行添加到DOM中的，这无关紧要。尝试这种方法，你会发现它是有效的。