检测iframe内容是否成功加载

Question

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

问题是，如何检测是否能够加载iframe？我尝试订阅“load”事件，如果在一定时间内没有触发此事件，则进行故障转移，但这仅适用于Firefox，因为IE和Chrome在显示“页面未找到”时会触发“load”事件。

- Javier Orellana

---

嘿，skinssay，你找到任何不使用代理的解决方案了吗？ - brillout

没有，我进行了更深入的研究，我认为这是不可能的 :( - Javier Orellana

根据http://stackoverflow.com/questions/3552355/prevent-iframe-this-webpage-is-not-available-error-from-displaying-on-website，onerror属性受WebKit支持，但我没有成功让它工作。你呢？ - brillout

从Chrome 35开始，iframe不再支持onerror。https://code.google.com/p/chromium/issues/detail?id=365457#c4 - Pure Function

Answer 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>

我自己没试过，所以不知道它是否有效。祝你好运！

- RobinBrouwer

---

这个功能与 onload 事件类似，即使加载的页面是 IE 的错误页面，(iframe.readyState == "complete") 条件也是成立的。因此，它可以告诉我页面何时已经加载完成，但却无法确定是否成功加载。不管怎样，还是谢谢！ - Javier Orellana

谢谢！我已经搜寻了两个小时的解决方案，终于找到了一个可行的！ :) - MikeSchinkel

在Chrome中无法工作：https://dev59.com/EmYr5IYBdhLWcg3wGmmq - anmarti

iframes不是XMLHttpRequests！不，这样行不通。 - Pizzaiola Gorgonzola

最佳答案！在谷歌浏览器上运行良好。 - haMzox

Answer 2

现今，浏览器有一系列安全限制，阻止您访问iframe的内容（如果它不是您的域名）。如果您真的需要这个功能，您需要构建一个服务器页面作为代理，将URL作为参数接收，测试它是否是有效的URL，并重定向或显示错误页面。

- Adilson de Almeida Jr

Answer 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
            }
        });

- Henry

Answer 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。

- Jens Timmerman

Answer 5

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

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

- DVK

---

既然他打了“跨域”标签，我想他应该无法控制双方。 - MK.

是的，我无法控制内容。想法是用户可以使用任何他想要的URL配置iframe的src。 - Javier Orellana

eval 是邪恶的。带有 eval 的 iframe 是邪恶的。<iframe id="iframe" src="http://www.google.com" onLoad="eval(str);"></iframe> - PHearst

Answer 6

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

欲了解更多信息，请参见http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie-and-firefox/。

- Bitsplitter

---

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