inter-Iframe communication using postMessage

Question

I have a parent page of domain A (http://example.com)

On the parent page exists two iframes that are the same domain but not domain A. (http://test.com)

Is there any way to pass a value from one test.com iframe to the other when the parent is example.com or is the behavior I am describing against the ``rules'' of iframes

Thanks

This is a duplicate question, you just want to do cross-domain postMessage, you can look at this: http://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent — joseeight, Jan 01 '14 at 18:15
You're not correct, this is not a duplicate of that question. I want to postMessage in one iframe and send it to another iframe, independent of the parent window. These don't help me do that. — , Jan 01 '14 at 18:44
Okay, I see, well, in that case, you can't do that from sibling to sibling. What you need to do is have the parent listen for the events from each frame and then send it to the other, so just a vanilla mediator. — joseeight, Jan 01 '14 at 19:39
If you are using HTML5 capable browsers (IE10+), you could actually use Sandboxing to allow you to get the different windows via window.parent, but that is not supported in older browsers, and hence why I suggest using the mediator approach. When using the window.parent, you get the DOM tree of the parent, and could look for the iframe.contentWindow you want to communicate with. — joseeight, Jan 01 '14 at 19:43
If you tell me what browsers you are supporting I can post proper details and do a jsfiddle with an example. — joseeight, Jan 01 '14 at 19:50
Chrome and Firefox are not the issue, in order to get you the right solution, we need to know the version of IE. IE10 and above support cross-domain access to the parent element of window, while IE9 and below do not, so the help you are looking for relies on knowing what you intent to support in terms of browsers as this would be two separate solutions. — joseeight, Jan 02 '14 at 01:20

score 6 · Accepted Answer · edited Jul 17 '23 at 22:05

Checkout this JSFiddle, I simulated the cross-domain iFrames in order to make it more readable. Basically the top parent of both frames acts as a mediator to re-dispatch the message to the target frame, but the frames trigger all actions and responses.

HTML

<!-- Adding the sandboxing attribute to illustrade cross-domain -->
<iframe id="one" sandbox="allow-scripts allow-modals"></iframe>
<iframe id="two" sandbox="allow-scripts allow-modals"></iframe>

JavaScript

var frame_one = document.getElementById('one');
var frame_two = document.getElementById('two');

// The parent has to mediate because cross-domain sandboxing
// is enabled when on different domains, plus backwards compatible.
window.addEventListener('message', function (m) {
    // Using an object with a 'frame' property that maps to the ID
    // which could be done as you would like.
    var targetFrame = document.getElementById(m.data.frame);
    targetFrame.contentWindow.postMessage(m.data.message, '*');
}, false);


/**
 * This is just to illustrate what a normal document would look
 * like you should just set the normal 'src' attribute and the
 * string would be the normal HTML of the documents.
 */
frame_two.srcdoc = '<!DOCTYPE html>\
<html>\
<head>\
<script>\
window.addEventListener("message", function (m) {\
alert("Frame Two Says: " + m.data);\
}, false);\
window.addEventListener("load", function () {\
window.parent.postMessage({frame: "one", message: "Received message from frame two!"}, "*");\
}, false);\
</script>\
</head>\
<body>\
two\
</body>';

frame_one.srcdoc = '<!DOCTYPE html>\
<html>\
<head>\
<script>\
window.addEventListener("message", function (m) {\
alert("Frame One Says: " + m.data);\
}, false);\
window.addEventListener("load", function () {\
setTimeout(function () {\
window.parent.postMessage({frame: "two", message: "Received message from frame one!"}, "*");\
}, 1500);\
}, false);\
</script>\
</head>\
<body>\
one\
</body>';

Thanks so much. I'll give it a try and see if I have any questions. Really appreciate it joseeight. — , Jan 02 '14 at 02:43
Thanks for the solution. Is there any way of doing it with 0 extra code running on the parent page? Direct communication between the iframes? or is that impossible. — , Jan 02 '14 at 13:00
Well, not really, this is because when you have a cross domain frame you cannot access the DOM of the parent, as this is sandboxed by the browser, and there is no real way around that. You might want to look at WebSockets which you can then use a server as a mediator, but in any event, you won't be able to do iFrame to iFrame if they are cross domain in respect to their parent. — joseeight, Jan 02 '14 at 18:03
One thing, do you have control over the parent page? If you do, you could just run your iFrames through a proxy on the same domain as the parent, so they are in theory on the same domain, and then will give you DOM access. — joseeight, Jan 02 '14 at 18:05

inter-Iframe communication using postMessage

1 Answers1