In Part 1 of the series, I talked about the basics of Window.postMessage and showed some sample code.  This post will show some real code with a demo link.   This code purposefully has some security issues which will be addressed in the third and final post of the series.

The demo code found at https://www.chs.us/pm/source.html is –

`<iframe src="https://www.bitbucket.me/pm/target.html" style="width:100%; height:50%;"></iframe>





`

What it does is load https://www.bitbucket.me/pm/target.html in an iframe that is 50% of the height of the window and 100% of the width.  It then has a form where you can specify text and when you hit submit, it sends a message to the iframe with the text that is specified in the form.


The code for https://www.bitbucket.me/pm/target.html is –`


`

It first creates registers a function(receiveMessage) to handle the “message” event and creates a div.  When a message is received it, it  appends the text to the div.