Detect failure to load contents of an iframe

Question

I can detect when the content of an iframe has loaded using the load event. Unfortunately, for my purposes, there are two problems with this:

• If there is an error loading the page (404/500, etc), the load event is never fired.
• If some images or other dependencies failed to load, the load event is fired as usual.

Is there some way I can reliably determine if either of the above errors occurred?

I'm writing a semi-web semi-desktop application based on Mozilla/XULRunner, so solutions that only work in Mozilla are welcome.

Answer 1

If you have control over the iframe page (and the pages are on the same domain name), a strategy could be as follows:

• In the parent document, initialize a variable var iFrameLoaded = false;
• When the iframe document is loeaded, set this variable in the parent to true calling from the iframe document a parent's function (setIFrameLoaded(); for example).
• check the iFrameLoaded flag using the timer object (set the timer to your preferred timeout limit) - if the flag is still false you can tell that the iframe was not regularly loaded.

I hope this helps.

Update - Daniel's response to this answer in the comments:

1. Why bother adding JavaScript to the iframe page? I could just as easily use setTimeout in conjunction with the load event.
2. This doesn't reliably detect if load fails or why, just whether it succeeds within a time limit.
3. Doesn't detect the case where page dependencies fail to load.

P.S.: Similar question here: Retrieving HTTP status code from loaded iframe with Javascript - sadly with no valid solution.

Answer 2

I had this problem recently and had to resort to setting up a Javascript Polling action on the Parent Page (that contains the IFRAME tag). This JavaScript function checks the IFRAME's contents for explicit elements that should only exist in a GOOD response. This assumes of course that you don't have to deal with violating the "same origin policy."

Instead of checking for all possible errors which might be generated from the many different network resources.. I simply checked for the one constant positive Element(s) that I know should be in a good response.

After a pre-determined time and/or # of failed attempts to detect the expected Element(s), the JavaScript modifies the IFRAME's SRC attribute (to request from my Servlet) a User Friendly Error Page as opposed to displaying the typical HTTP ERROR message. The JavaScript could also just as easily modify the SRC attribute to make an entirely different request.

function checkForContents(){
var contents=document.getElementById('myiframe').contentWindow.document
if(contents){
 alert('found contents of myiframe:' + contents);
 if(contents.documentElement){
  if(contents.documentElement.innerHTML){
   alert("Found contents: " +contents.documentElement.innerHTML);
   if(contents.documentElement.innerHTML.indexOf("FIND_ME") > -1){
    openMediumWindow("woot.html", "mypopup");
   }
  }
 }
}

}

Answer 3

I think that the pageshow event is fired for error pages. Or if you're doing this from chrome, then your check your progress listener's request to see if it's an HTTP channel in which case you can retrieve the status code.

As for page dependencies, I think you can only do this from chrome by adding a capturing onerror event listener, and even then it will only find errors in elements, not CSS backgrounds or other images.