Window.postMessage part 2 - an example

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 is –

`<iframe src="" style="width:100%; height:50%;"></iframe>


What it does is load 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 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.