Question

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

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

Answer 1

我通过Google找到了以下链接：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>

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

Answer 2

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

如果你真的需要这个功能，你必须建立一个必须作为代理服务器的服务器页面，接收url作为参数，测试它是否是一个有效的URL，并重定向或显示错误页面

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

Answer 4

如果检查网址是否可用，然后设置iframe的实际网址呢？例如使用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。

Answer 5

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

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

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/

检测iframe内容是否已成功加载

6 个答案: