Question

Is there any standard way to know if my script has access to an iframe‘s document?

I couldn’t find anything in the web so I came up with this:

function checkifr() {
    function errHandler() {
        alert('Error. Try again later.');
    }
    var ifr = $('#ifr')[0]; //the iframe DOM element

    try {
        var d = ifr.contentWindow || ifr.contentDocument;
        if (!d) {
            errHandler();
            return false;
        }

        var b = $('#ifr').contents().find('body');
        //... manipulate iframe content

    } catch(e) {
        errHandler();
    }
}

It works, Firefox throws an error when I try to access the iframe‘s contents and ends up in the catch block. Chrome shows an Unsafe JavaScript attempt to access frame warning in the console but never enters the catch block, it seems to return null for those attempts so the initial if (!d) takes care of it. Opera and IE behave similarly to FF. Edit: With the code above, now Chrome returns an “empty” Window object (with no properties) which do not trigger my if block. Check Esailija‘s answer which works nicely cross-browser!

Here’s the fiddle.

I can’t test the iframe‘s src against window.location.

Justificatory Background: This is because this function is part of a small image upload plugin which I’m developing (using an iframe as target since IE<9 doesn’t support XHR2), and the goal is mainly validating connection error/timeout/etc. The default browser pages for these errors are subject to the same origin police, hence the purpose of this question. I don’t want to send an ajax call to check if the page is available, as I want to validate the submit request itself. jQuery’s .load handler doesn’t fire for errors, jQuery’s .error and the onerror HTML attribute do not work for this. An illustration of the working script is available here, but you may ignore it completely and simply answer the question below.

Note that the above block is solely for illustrating why I can’t use the iframe.src.

I do think that there should an easier/standard way to check an iframe‘s “accessibleness”, but I can’t find anything in the web nor SO except half-solutions which simply check the iframe.src and do not apply for many cases. If my hackish try/catch block is considered a technically “clean” solution, others may re-use it if no better option is found.

So is there any standard or simpler way or jQuery plugin to check if my script has access to an iframe‘s document without comparing the iframe‘s src with the window.location? Without try/catch blocks and errors/warnings in the console if possible.

Answer 1

Here’s another option, can’t really do it without try catch.

Tests http://jsfiddle.net/LHjwZ/11/

function checkIframe( ifr ) {
    var key = ( +new Date ) + "" + Math.random();

    try {
        var global = ifr.contentWindow;
        global[key] = "asd";
        return global[key] === "asd";
    }
    catch( e ) {
        return false;
    }
}