Question

4

How can I handle errors in loading an iframe?

rated 0 times [ 10] [ 6] / answers: 1 / hits: 69561 / 14 Years ago, mon, september 13, 2010, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaceyr

Add To Favorites

Follow

Total Points: 510

Total Questions: 97

Total Answers: 116

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

kaceyr questions

1 TypeScript Expected 1 arguments, but got 2

Wed, Dec 15, 21, 00:00, 2 Years ago

1 How to show input fields based on mat radio button selection in angular material

Wed, Jun 24, 20, 00:00, 4 Years ago

1 How to change variable value in index.html based on the environment in angular

Thu, Feb 6, 20, 00:00, 4 Years ago

1 react dynamic import using a variable doesn't work

Sat, Oct 12, 19, 00:00, 5 Years ago

1 puppeteer-cluster: queue instead of execute

Mon, Aug 5, 19, 00:00, 5 Years ago

View All

answered 14 Years ago leog · Accepted Answer

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