Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I handle errors in loading an iframe?

Tags:

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

like image 828
James A. Rosen Avatar asked Sep 13 '10 23:09

James A. Rosen


People also ask

How can I get iframe error?

One option is to make an ajax call to the code behind, to fetch the sites, see if its reponse code is 200, if it loads successfully, return success information to the clien. Then put it in the iframe to load it.

How do I fix refused connection in iframe?

You cannot fix this from Power Apps Portal side. Most probably web site that you try to embed as an iframe doesn't allow to be embedded. You need to update X-Frame-Options on the website that you are trying to embed to allow your Power Apps Portal (if you have control over that website).

How do I know if my iframe is not working?

setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe'). attr("src",""); //stop loading content } },5000);

How do you check if the content of an iframe is loaded?

To check if iframe is loaded or it has a content with JavaScript, we can set the iframe's onload property to a function that runs when the iframe is loaded. document. querySelector("iframe").


2 Answers

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

like image 60
Marcel Korpel Avatar answered Oct 22 '22 13:10

Marcel Korpel


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

like image 44
Joel Kennedy Avatar answered Oct 22 '22 12:10

Joel Kennedy