javascript - How can I handle errors in loading an iframe?

Question

I have an <iframe> that other sites can include so their users can POST a form back to my site. I'd like to handle gracefully the cases where my site is down or my server can't serve the <iframe> contents (that is, a response timeout or a 4xx or 5xx error). I tried adding an onError to the <iframe> object, but that didn't seem to do anything:

showIFrame = function() {
  var iframe = document.createElement('iframe');
  iframe.id = 'myIFrame';
  iframe.src = 'http://myserver.com/someURLThatFailsToLoad';
  iframe.onError = iframe.onerror = myHandler;
  document.body.appendChild(iframe);
};

myHandler = function(error) {
  document.getElementById('myIFrame').style.display = 'none';
  console.error('Error loading iframe contents: ' + error);
  return true;
};

If my server returns a 404 I just get the contents of the not-found page in my <iframe>. In fact, that error handler isn't ever triggered. Is there a way to make this work?

(I'm currently testing in Chrome, but I'd like it to also work for FF and IE >= 7.)

Answer 1

To detect whether your server is down or not, you can include an empty script file from your own domain. When the server is down, the onerror event handler will fire:

var el = document.createElement('script');
el.onerror = errorFunction;
el.src = "somebogusscript.js?" + new Date().getTime();
document.body.appendChild(el);

Note: don't forget to add a random string to the src attribute to avoid the client using a cached version (which could stop a look at the server at all).