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.