I have some embed code that users can put on their sites. It creates two children iframes on the page. I'd like to have those children be able to communicate.
I'm using javascript's window.postMessage
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
Since the two iframe children can't communicate directly, I'm using the parent as a relay for messages. However the parent can be on a different domain since it's embeddable code.
When all three (parent and two children) are on the same domain, it's pretty easy and I have this working with the security check checking the e.origin
is my own site
# coffeescript
# host = "http://www.mysite.com"
host = "http://localhost"
receive_message = (e) ->
console.log("received message from " + e.origin + ": " + e.data)
return if e.origin != host
if e.data == "show"
...
else if e.data == "hide"
...
window.addEventListener("message", receive_message, false)
What is an elegant way to check the origin when the parent can be on any domain?
What is a good way to allow debugging of the script where the origin can be localhost?
Is it sufficient to just check the data param if there are non destructive/changing messages being passed across?
Thanks!
Communicating directly between iframes is also possible by combining window. parent with target as defined above. In conclusion, the postMessage method is a more dynamic alternative to the single DOM, better suited if you load multiple pages in one iframe, but not always easier and it still requires the use of the DOM.
postMessage in your web app sends to the main document's window , not to the iframe's. Specify the iframe's window object: document. getElementById('cross_domain_page').
All you have to do is first dispatch an event from the iframe to the parent that notifies the parent that the iframe is loaded (essentially a "ready message"). The parent will be listening for messages and if it receives the "ready message" event, it can then reply to the iframe with whatever message you want to send.
postMessage() The window. postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With