Detect if the iframe content has loaded successfully

Question

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.

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.

hey skinssay, did you find any solution without using a proxy? — brillout, Feb 16 '11 at 15:19
no, I haven't. I made a deeper research and I think it is not possible :( — Javier Orellana, Feb 22 '11 at 18:56
according to http://stackoverflow.com/questions/3552355/prevent-iframe-this-webpage-is-not-available-error-from-displaying-on-website the onerror property is supported by webkit but i didn't got any luck to make it work. did you? — brillout, Feb 23 '11 at 20:27
As of Chrome 35 at least the onerror is not supported by iframe. https://code.google.com/p/chromium/issues/detail?id=365457#c4 — Pure Function, Jan 26 '15 at 07:50

score 15 · Answer 1 · answered Jan 07 '11 at 20:26

15

I found the following link via 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!

answered Jan 07 '11 at 20:26

RobinBrouwer

973
6
13

3

This works pretty much like the onload event, the (iframe.readyState == "complete") condition is true even if the loaded page is an IE error page. So, it let me know when the page has loaded, but not if it was successfully loaded. Thanks anyway! – Javier Orellana Jan 21 '11 at 02:41
Thank you! I've been scouring for a working solution for 2 hours. Finally! :) – MikeSchinkel Sep 23 '12 at 05:47
Does not work in Chrome:http://stackoverflow.com/questions/13952942/iframe-readystate-does-not-work-in-chrome – anmarti Dec 19 '12 at 13:03
iframes are NOT XMLHttpRequests !, no this doesn't work. – Pizzaiola Gorgonzola Apr 25 '14 at 14:52
Best answer! Working fine on chrome. – haMzox Nov 10 '17 at 07:47

score 8 · Accepted Answer · answered Jan 09 '11 at 02:38

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

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.

Henry · Answer 3 · 2016-07-12T18:46:48.073

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

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

Jens Timmerman · Answer 4 · 2012-12-10T10:46:43.180

How about checking if the url is available and only then setting the actual url of the iframe? e.g. with 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.

score 0 · Answer 5 · answered Dec 28 '10 at 20:09

0

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.

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

answered Dec 28 '10 at 20:09

DVK

126,886
32
213
327

1

since he put the tag "cross-domain" I would imagine he doesn't control both sides. – MK. Dec 28 '10 at 20:11
Yes, i don't have control over the content. The idea is that the user can configure the iframe's src with whatever url he wants. – Javier Orellana Dec 28 '10 at 21:10
eval is evil. iframe with eval is satanic. – PHearst Jan 27 '13 at 12:02

score 0 · Answer 6 · answered Jan 07 '11 at 20:15

0

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.

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/

answered Jan 07 '11 at 20:15

Bitsplitter

980
7
17

Yes you are right, it will not let you access cross-domain content. – Bitsplitter Jan 22 '11 at 06:58

Detect if the iframe content has loaded successfully

6 Answers6

Linked

Related