检测 iframe 内容是否加载成功答案

【问题标题】：Detect if the iframe content has loaded successfully检测 iframe 内容是否加载成功
【发布时间】：2011-05-31 17:50:26
【问题描述】：

我有一个包含 iframe 的小部件。用户可以配置此 iframe 的 url，但如果 url 无法加载（它不存在或用户无法访问互联网），则 iframe 应故障转移到默认离线页面。

问题是，如何检测 iframe 是否可以加载？我尝试订阅“加载”事件，并且，如果一段时间后未触发此事件，则我进行故障转移，但这仅适用于 Firefox，因为 IE 和 Chrome 在“未找到页面”时触发“加载”事件“是显示出来。

【问题讨论】：

嘿skinssay，你有没有找到任何不使用代理的解决方案？
不，我没有。我做了更深入的研究，我认为这是不可能的:(
根据stackoverflow.com/questions/3552355/… webkit 支持 onerror 属性，但我没有任何运气让它工作。是吗？
从 Chrome 35 开始，至少 iframe 不支持 onerror。 code.google.com/p/chromium/issues/detail?id=365457#c4

标签： javascript dom-events cross-domain

【解决方案1】：

我通过谷歌找到了以下链接：http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

不知道它是否解决了“找不到页面”的问题。

<script type="javascript">
var iframe = document.createElement("iframe");
iframe.src = "http://www.your_iframe.com/";
if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera) {
  iframe.onreadystatechange = function(){
    if (iframe.readyState == "complete"){
      alert("Iframe is now loaded.");
    }
  };
} else {
  iframe.onload = function(){
    alert("Iframe is now loaded.");
  };
}
</script>

我自己没试过，不知道好不好用。祝你好运！

【讨论】：

这很像 onload 事件，即使加载的页面是 IE 错误页面，(iframe.readyState == "complete") 条件也为真。所以，它让我知道页面何时加载，但不知道是否成功加载。还是谢谢！
谢谢！我一直在寻找一个工作解决方案 2 小时。最后！ :)
在 Chrome 中不起作用：stackoverflow.com/questions/13952942/…
iframe 不是 XMLHttpRequests ！不，这不起作用。
最佳答案！在 chrome 上工作正常。

【解决方案2】：

如今，浏览器具有一系列安全限制，使您远离 iframe 的内容（如果它不属于您的域）。

如果您确实需要该功能，则必须构建一个必须充当代理的服务器页面，接收 url 作为参数，测试它是否是有效的 url，并进行重定向或显示错误页面.

【讨论】：

【解决方案3】：

如果您控制 iframe 的内容，iframe 可以向父级发送消息。

        parent.postMessage('iframeIsDone', '*');

父回调监听消息。

        var attachFuncEvent = "message";
        var attachFunc = window.addEventListener ;
        if (! window.addEventListener) {
            attachFunc = window.attachEvent;
            attachFuncEvent = "onmessage";
        }

        attachFunc(attachFuncEvent, function(event) {
            if (event.data ==  'iframeIsDone') { // iframe is done callback here
            }
        });

【讨论】：

【解决方案4】：

如何检查 url 是否可用，然后才设置 iframe 的实际 url？例如使用 JQuery

var url = "google.com"
var loading_url = "/empty.html"
document.getElementById("iframe").src = loading_url;
$.ajax({
    url: url,
    type: 'GET',
    complete: function(e, xhr, settings){
         if(e.status === 200){
              document.getElementById("iframe").src = url;
         }
    }
});

编辑：这似乎不适用于跨域，在这些情况下状态代码为 0。

【讨论】：

【解决方案5】：

如果您可以控制 iframe 的内容（例如，您可以向页面添加任意代码），您可以尝试在每个 iframe 中实现一个特殊功能，然后在您的页面中，调用该函数并捕获一个如果由于页面未加载而通过 eval 调用的函数失败，则会出现错误（通过 window.onerror 处理程序）。

这里是示例代码：http://www.tek-tips.com/viewthread.cfm?qid=1114265&page=420

【讨论】：

既然他把标签“跨域”我想他不会控制双方。
是的，我无法控制内容。这个想法是用户可以使用他想要的任何 url 配置 iframe 的 src。
eval 是邪恶的。带有 eval 的 iframe 是邪恶的。 google.com" onLoad="eval(str);">

【解决方案6】：

onload 触发后，您可以清除 iframe 的内容以查看它是否包含有用的页面。不幸的是，您必须使此浏览器特定，因为它们都显示不同的“找不到页面”消息。

【讨论】：

是的，你是对的，它不会让你访问跨域内容。