How to retrieve data posted using postMessage of HTML5?

html, javascript, jquery

Solution

HTML5 `postMessage()` API method has syntax as below:

userWindow.postmessage(myMessage, targetOrigin);

this will post `myMessage` to the window pointed by `userWindow`, which has `targetOrigin` as it's URI. If the `userWindow` reference matches but `targetOrigin` does not match with it's URI then the message will not get posted.

In the target window i.e. `userWindow` you can listen to the `message` event.

window.addEventListener('message', handlerFunction, captureBubble);

For example if you have a window reference in `myWindow` variable, then on source...

Call

myWindow.postMessage('this is a message', 'http://www.otherdomain.com/');

Callback handling

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== 'http://www.otherdomain.com/')
    return;
  // this check is neccessary 
  // because the `message` handler accepts messages from any URI

  console.log('received response:  ',event.data);
}

and on target...

Message handler

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  if (event.origin !== 'http://www.callingdomain.com/')
    return;

  console.log('received message:  ',event.data);
  event.source.postMessage('this is response.',event.origin);
}

`postMessage` API Reference - MDN

A nice tutorial

Problem

I have two HTML files. In one HTML file I'm posting a message using `postMessage` in HTML5. How can I get the posted message in another HTML files on load? One.html ``` <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript"> $(document).ready(function() { //post message var iframeWin = document.getElementById("iframe_id").contentWindow; iframeWin.postMessage("helloooo"); }); </script> <title>IFrame Example</title> </head> <body> <input id="myInput" type="hidden" value="IDDUSER"> <iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe> </body> </html> ``` Two.html ``` <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript"> $(document).ready(function() { //Get posted message here }); </script> <title>IFrame Child Example</title> </head> <body> <p id="received-message">I've heard nothing yet</p> <h1>Iframe</h1> </body> </html> ```

Original source