How to check if iframe fails to load? jquery?

Question

I have this jquery code right now and it's working fine. What it does it when a user clicks the submit button, it would hide the form, show the loader, then submit the data to a link and load the output in an iframe.

$(document).ready(function() {

$("#xxx_form").validate({
    submitHandler: function() {
        $('#input_form').hide('slow');
        $('#loader').show('slow');
        form.submit();
    }
});

$("#xxx_frame").load(function (){
    $('#loader').hide('slow');
    $('#history').show('slow');
    $('#xxx_frame').show('slow');
});

});

This is working fine. What I need is how to check if the iframe loaded fine or not. During my testing their are times when the iframe would timeout or give an error that it can't connect to the server. Due to ISP failure. Now I need to check for this kind of errors, how can I do this?

Answer 1

As far as I can see, there is no way to test for an error within an iframe. There is the .error() event but according to a comment in the documentation:

Using .error() on an iframe never seems to trigger (even though .load() will trigger on a successful iframe load).

maybe you need to implement some kind of timeout yourself using the .load() event: If the load event (signifying success) doesn't fire within, say, five seconds, assume an error.

Answer 2

Late to the party, but I've managed to crack it: It doesn't detect whether the iFrame loaded correctly, but it will detect whether the server was/is accessible. For your use, you could flip the logic, and have something to hide once the server load was successful.

At first, I thought to do an AJAX call to test whether the website a) existed and b) allowed cross origin calls, except that it didn't work for me initially, as I had used jQuery. It works perfectly if you do a XMLHttpRequest:

var url = http://url_to_test.com/
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status != 200) {
        console.log("iframe failed to load");
    }
};
xhttp.open("GET", url, true);
xhttp.send();

Edit:
So this method works ok, except that it has a lot of false negatives (picks up a lot of stuff that would display in an iframe) due to cross-origin malarky. The way that I got around this was to do a CURL/Web request on a server, and then check the response headers for a) if the website exists, and b) if the headers had set x-frame-options.

This isn't a problem if you run your own webserver, as you can make your own api call for it.

My implementation in node.js:

app.get('/iframetest',function(req,res){ //Call using /iframetest?url=url - needs to be stripped of http:// or https://
   var url = req.query.url; 
    var request = require('https').request({host: url}, function(response){ //This does an https request - require('http') if you want to do a http request
        var headers = response.headers;
        if (typeof headers["x-frame-options"] != 'undefined') {
            res.send(false); //Headers don't allow iframe
        } else {
            res.send(true); //Headers don't disallow iframe
        }
    });
    request.on('error',function(e){
       res.send(false); //website unavailable
    });
    request.end();
});

Answer 3

Try...

HTML:

<iframe id="box" ...

JQUERY:

$('#box').bind('error', function () {
   alert("loaded error");
}

Edit: exist more command bind load or error