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

I have a widget that contains an iframe. The user can configure the url of this iframe, but if the url could not be loaded (it does not exists or the user does not have access to internet) then the iframe should failover to a default offline page.

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

The question is, how can I detect if the iframe could be loaded or not? I tried subscribing to the 'load' event, and, if this event is not fired after some time then I failover, but this only works in Firefox, since IE and Chrome fires the 'load' event when the "Page Not Found" is displayed.

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

6 个解决方案

#1

Nowadays the browsers have a series of security limitations that keep you away from the content of an iframe (if it isn´t of your domain).

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

If you really need that functionality, you have to build a server page that have to work as a proxy, that receive the url as a parameter, test if it is a valid url, and does the redirect or display the error page.

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

#2

I found the following link via Google: http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

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

Don't know if it solves the 'Page Not Found' issue.

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

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

I haven't tried it myself, so I don't know if it works. Good luck!

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

#3

If you control the content of the iframe, the iframe can send a message to the parent.

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

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

The parent callback listens for the message.

父回调侦听消息。

        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

How about checking if the url is available and only then setting the actual url of the iframe? e.g. with JQuery

如何检查网址是否可用,然后设置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;
         }
    }
});

Edit: This does not seem to work cross domain, the status code is 0 in those cases.

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

#5

If you have control over the contents of the iframe (e.g. you can add arbitrary code to the page), you can try to implement a special function in each of them, then in your page, you call that function and catch an error (via window.onerror handler) if the function called via eval fails because the page didn't load.

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

Here's example code: http://www.tek-tips.com/viewthread.cfm?qid=1114265&page=420

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

#6

After the onload fires, you can scavenge the content of the iframe to see if it contains a usefull page or not. You'd have to make this browser specifuc unfortunately because they all display a different "page not found" message.

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

For more info, take a look here at http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie-and-firefox/

欲了解更多信息,请访问http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie - 和 - 火狐/

#1