Communicating between iframes with window.postMessage
Since the late-90s, extensively using iframes has been maligned by webdesingers. Used in the improper way, they make it very hard to save application state, are often ignored by search engines, and open up security issues. It also used to be the case that all kinds of hacking had to go on just to get different frames to talk to each other.
With HTML 5, that isn't really the case anymore. It offers the window.postMessage function to facilitate communication between frames. While I am not holding my breath for a resurgence of this 90s craze, it does open up some new possibilities for iframes.
Below is a quick proof of concept I whipped up. It is two text boxes, one being in a child frame (src: jsfiddle) and the other in the parent window. They both have event listeners waiting for
message event that gets generated when you call
I ran into a small roadblock when decided how to propagate the message back up to the parent from from within the child frame. You can get the reference to the child's
window object by doing a
document.querySelector but that isn't there isn't a way to get the parent
document from within a child frame. You do get a reference to the caller from
event.source though. So once the parent calls the child, you can save this reference and use it later.