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 wit

Answer 1

This is how I detected the loading of a Cross-Domain Iframe,

1. Set a unique id for the iframe ( U may use any sort of identifier, it doesn't matter )

<iframe id="crossDomainIframe" src=""> </iframe>

2. Set window event listener:

document.getElementById("MICSMsgBoardIframe").addEventListener('load',

function actionToPerform(){
  //Do your onLoad actions here
}

Answer 2

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 3

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 4

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 5

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 6

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