CODEWITHSUNDEEP
javascripthtmliframeerror-handling
James A. Rosen
James A. Rosen

Reputation: 65232

How can I handle errors in loading an iframe?

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

Upvotes: 28

Views: 85848

Answers (3)

Sam Watkins
Sam Watkins

Reputation: 8309

One technique is to set a JavaScript timeout when you make the request. If your timeout fires before the iframe onload event, the content didn't load. You could then set iframe.src to about:blank, delete, or reuse the iframe.

Upvotes: 1

Marcel Korpel
Marcel Korpel

Reputation: 21763

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

Upvotes: 15

Joel Kennedy
Joel Kennedy

Reputation: 1611

Perhaps you could try onErrorUpdate for the event handler? I couldn't see an onError handler for iFrames. If that doesn't work, you could try onLoad and then check the source of the iframe or the title of it for a 404 message.

Such as: if (frameDoc.title == 'title the server sends for 404') {

Source:

http://bytes.com/topic/javascript/answers/166288-catch-404-when-using-iframe

iFrame Methods: http://www.java2s.com/Code/HTMLCSSReference/HTML-Tag-Reference/iframeJavaScriptMethods.htm

iFrame Properties: http://www.java2s.com/Code/HTMLCSSReference/HTML-Tag-Reference/iframeJavaScriptProperties.htm

Upvotes: 3

Related Questions