Communication between iFrames?

Question

How can you make two iFrames talk to each other? For example I was a element value off the 2nd iframe and the 1st iframe has the display element on it. I need to get the value off the 2nd frame to the 1st. How would I do this? Don't say use cookies, cause that will hurt with massive sum of data.

First of all, are the iframes on the same domain? Or are they from different sites? — BBog, May 20 '13 at 20:01
https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage — epascarello, May 20 '13 at 20:07
Noting that the difference in protocol matters here: an iframe with `https://example.com` will not be able to access an iframe served with `http://example.com` — Tyler Chong, Sep 18 '22 at 00:40

score 25 · Accepted Answer · answered May 20 '13 at 20:06

25

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;

answered May 20 '13 at 20:06

jbabey

45,965
12
71
94

Using top makes the assumption that this code will itself never be loaded in a frame otherwise wouldn't point to what you expect it to. – Matt Berkowitz May 20 '13 at 20:20
@MattBerkowitz what do you mean? if you have two iframes on a page and call `top` from them, it gives you the containing window from which you can find the other iframe. – jbabey May 20 '13 at 22:26
19

No it gives you the top most frame, which could be the parent or some grandparent, etc. Consider the setup you just mentioned all loaded inside another iframe (we can't control who might load our page in an iframe), top will return that outermost page which will probably not have a 'otherIframe' to find (and might not even satisfy CORS requirements). Using `parent` instead of `top` would probably be slightly better as it guarantees you're doing what you think you're doing. – Matt Berkowitz May 20 '13 at 22:42
I get a cross-origin error when trying to call `.getElementById` on `top.document` (or on `window.parent`) – Hugh Perkins Dec 14 '21 at 20:40

score 5 · Answer 2 · edited Jan 28 '16 at 15:30

I'll warn you first off that you will need full code-modification abilities for both iframes. Iframes are treated with strict security; otherwise, I could make a domain "bunkofamerica.com", put "bankofamerica.com" in an iframe, and then analyze the user's password as they type it. (Banks tend to have iframe-busting code anyway, but still...)

You're looking for this native function: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

And here's a github library my company uses to make this more cross-browser compatible: https://github.com/daepark/postmessage

jbabey is correct, if iframes are in the same domain and protocol, then it's easier.

Opera Docs explained this with best relevant examples https://dev.opera.com/articles/window-postmessage-messagechannel/#channel

Matt Berkowitz · Answer 3 · 2013-05-20T20:23:44.057

First things first, the only way a frame can interact outside of it's self is if the content loaded in both places is from the same domain otherwise you're going to get a CORS error.

Assuming that's all gravy, I'd create an manager object on the window object of the parent frame.

window.Mgmt = {
    frame1: $('iframe#frame1'),
    frame2: $('iframe#frame2')
}

then in either of the iframes you should be able to access that object using window.parent.Mgmt.frame1, etc

Communication between iFrames?

3 Answers3

Linked