3

I have several iframes pointing to external websites on my page. In case those services are interrupted or changed, I would like to hide those iframes instead of displaying an error message on my page. Is there any way to find out in Javascript if the iframe has been loaded correctly? I added a class to hide the iframe and then remove it with jQuery when the iframe is ready, like this:

$('#widget').ready(function () {
    $('#widget').removeClass('hidden');
});

It still removes the hidden class when I put an invalid URL in the iframe src, showing the error iframe. My questions are two:

  • How can I make the function just run if the iframe has been loaded correctly?
  • Instead of using $('#widget').ready, I would like to use $('iframe').ready to target all iframes at once; if I do so, how to refer to the specific iframe loaded, inside the function?

Thanks!

Aise
  • 173
  • 2
  • 13
  • you would need to check the iframe's src url. You cannot do this using JS. Do you use PHP for your backend? – CodeGodie Feb 18 '15 at 17:52

2 Answers2

3

Your question can be boiled down to :

how can I check if an URL exists and the website is alive from Javascript ?

The answer is splitted in:

  • For internal URLs, use AJAX and check the response code: if it's 2xx or 3xx (eg 200 or 302), it's fine. If it's 4xx or 5xx (eg. 404 or 500) it's bad. Read more on a similar answer.

  • For external URLs, you can't do it due to a security measure called same-origin policy.

Since it seems you are pointing to external URLs, here is my suggestion:

Create a server-side component (a Servlet, a RESTful WebService, a Struts2 action, etc... whatever you prefer, according to the server side technology you are using) that perform the check for you, and return a streamed response with the data (if any) and the HTTP response code that you can check for errors. Then from the <iframe>s call your component URL.

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
  • Looks like it's not an easy task as I tought... I'm using PHP and Zend Framework 2, how can I check if the URL exists from there? – Aise Feb 18 '15 at 21:59
  • I don't use those, so I've no idea. You should post a separate question, asking about "how to contact and download a site serverside from PHP / ZendFramework 2", after having searched if a question like that has already been asked and answered. – Andrea Ligios Feb 19 '15 at 14:08
1

You probably can't do exactly what you want using Javascript, you need server-side things, PHP for instance.



However, here are some helpful places to look for more info:


You can run code after an iframe loads with this JQuery function:

$('#myIframe').load(function(){
    //your code (will be called once iframe is done loading)
});

Look at this Stack Overflow question and answers about iframe loading.


To target the specific element inside the function, do:

$('iframe').aFunction(function() { this.doSomething(); } );

Look at this Stack Overflow question and answers about "this".

Community
  • 1
  • 1
Joseph Hansen
  • 12,665
  • 8
  • 50
  • 68
  • I guess the `load()` will always happen, even in case of a 404 or a 500 received, isn't it ? – Andrea Ligios Feb 18 '15 at 17:21
  • Unfortunately both suggestions seem not to work for some reason. If I use load instead of ready, looks like the function sometime runs and sometime not, can't understand what's the reason... Using $('iframe') and this (or $(this)) it never runs. – Aise Feb 18 '15 at 21:57