Cross domain iframe content load detection

Question

I have a rather interesting problem. I have a parent page that will create a modal jquery dialog with an iframe contained within the dialog. The iframe will be populated with content from a 3rd party domain. My issue is that I need to create some dialog level javascript that can detect if the content of the iframe loaded successfully and if it hasn't within a 5 second time frame, then to close the dialog and return the user to the parent page.

I have researched numerous solutions and only two are of any true value.

1. Get the remote site to include a javascript line of document.domain = 'our-domain.com'.
2. Use a URL Fragment hack, but again I would need the request that the remote site able to modify the URL by appending '#some_value' to the end of the URL and my dialog window would have to poll the URL until it either sees it or times out.

Are these honestly the only options I have to work with? Is there not a simpler way to just detect this?

I have been researching if there's a way to poll for http response errors, but this still remains confined to the same restrictions.

Any help would be immensely appreciated.

Thanks

Answer 1

You could try using postMessage for communication between frames.
This will require the remote site to include some specific JavaScript to post a message to the parent document when it has finished loading.

Answer 2

Nicholas Zakas has an article about detecting if an iframe loaded: http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/. Basically you have this code snippet:

var iframe = document.createElement("iframe");
iframe.src = "simpleinner.htm";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

I haven't tested it, but I'm pretty sure jQuery should be able to handle it by doing something like $("#iframe").load(function () { alert("Local iframe is now loaded."); });

Answer 3

In any case you will need some sort of cooperation from the other domain's server, as you are trying to abuse the Same Origin Policy (SOP)

The first solution document.domain=... won't work if domains are different. It works only for subdomains and ports, as described in the link above.

The only option that allows cross domain communication without polling is JSONP or script injection with a JS function callback. This method is available in all Google APIs and works well.

We've explained on our blog a way to sandbox those calls in an iframe to secure them. While postMessage is better now, the window.name hack has the advantage of working on old browsers.

Ironically, SOP does not prevent you to POST anything to another domain. But you won't be able to read the response.

Answer 4

The easiest way (if you can get code added to the external sites) is to have them add an invisible iframe pointing to a special html file on your domain. This could then use parent.parent.foo() to notify the original window about the load event.

Listening for the "load" event will only tell you if the window loaded, not what was loaded or if the document is ready for interaction.

Answer 5

It's possible to do this with an onload handler on the iframe itself. Unfortunately (surprise!) IE makes it difficult. The only way I could get this to work was to compose HTML for the iframe, then append it to the document with innerHTML. Then I have to poll to see when the iframe appears in the DOM, which varies depending on if the page is loading. Here's a link to the source: http://svn.openlaszlo.org/openlaszlo/trunk/lps/includes/source/iframemanager.js

See create(), __finishCreate() and gotload(). Feel free to take a copy of this and use it yourself!

Regards, Max Carlson OpenLaszlo.org