How to Communicate Between Iframe and the Parent Site

How to communicate between iframe and the parent site?

With different domains, it is not possible to call methods or access the iframe's content document directly.

You have to use cross-document messaging.

parent -> iframe

For example in the top window:

myIframe.contentWindow.postMessage('hello', '*');

and in the iframe:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

iframe -> parent

For example in the top window:

window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

and in the iframe:

window.top.postMessage('hello', '*')

Communication between iFrames?

If the <iframe> elements are served from the same domain, then they can access each other directly. For example, in iframe1 you could do:

document.getElementById('someDiv').innerHTML = 
    top.document.getElementById('otherIframe').contentWindow.
    document.getElementById('someOtherDiv').innerHTML;

Possible Ways to Communicate Between iFrame and Parent Page across domains

easyXDM is designed for this exact purpose.
You can find it at http://easyxdm.net and it has quite a few examples.

To sum it up, it allows two windows to communicate 'freely' using either strings or RPC calls.

See http://consumer.easyxdm.net/current/example/methods.html for one of the RPC-demos.

communication between two iframe children using postMessage

Why do you say that the child iframes can't communicate directly? Actually, they can. What you can do within a child iframe is use the window.parent property to get a reference to the parent window, and then use the parent's frames property to get references to all child iframes (the frames property gives you an array of such references). After that, you can use postMessage on each of those references, and set the required origin restrictoin in the postMessage call so that you are sure only the right iframe gets the message.

Notice that this will work even when all three windows (iframe1, parent window and iframe2) are on different domains because iframe1 is not doing anything with the parent window (which would violate SOP), it is only fetching references to nested iframes.

Links:

https://developer.mozilla.org/en-US/docs/DOM/window.parent

https://developer.mozilla.org/en-US/docs/DOM/window.frames

Communication between child iframes

Kinda hacky, but you could build a communication channel on top of localStorage. Frames could send messages by writing to localStorage, and then read messages by constantly polling localStorage for changes.

---

Related Topics