I have a parent page of domain A ()
On the parent page exists two iframes that are the same domain but not domain A. ()
Is there any way to pass a value from one test iframe to the other when the parent is example or is the behavior I am describing against the ``rules'' of iframes
Thanks
I have a parent page of domain A (http://example.)
On the parent page exists two iframes that are the same domain but not domain A. (http://test.)
Is there any way to pass a value from one test. iframe to the other when the parent is example. or is the behavior I am describing against the ``rules'' of iframes
Thanks
Share Improve this question asked Dec 31, 2013 at 19:45 user583507user583507 8- This is a duplicate question, you just want to do cross-domain postMessage, you can look at this: stackoverflow./questions/8822907/… – joseeight Commented Jan 1, 2014 at 18:15
- 1 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. – user583507 Commented Jan 1, 2014 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 Commented Jan 1, 2014 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 municate with. – joseeight Commented Jan 1, 2014 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 Commented Jan 1, 2014 at 19:50
1 Answer
Reset to default 6Checkout 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 patible.
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>';