HTML5 - Web messaging

Web messaging is the ability to send realtime messages from the server to the client browser. It overrides the cross domain communication problem in different domains, protocols or ports
For example, you want to send the data from your page to ad container which is placed at iframe or voice-versa, in this scenario, Browser throws a security exception. With web messaging we can pass the data across as a message event.
Message events fires Cross-document messaging, channel messaging, server-sent events and web sockets.it has described by Message Event interface.
data
Contains string data
origin
Contains Domain name and port
lastEventId
Contains unique identifier for the current message event.
source
Contains to A reference to the originating document’s window
ports
Contains the data which is sent by any message port
Before send cross document message, we need to create a new web browsing context either by creating new iframe or new window. We can send the data using with postMessage() and it has two arguments. They are as −
message − The message to send
targetOrigin − Origin name
Sending message from iframe to button
var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);
Receiving a cross-document message in the receiving document
var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);
Two-way communication between the browsing contexts is called channel messaging. It is useful for communication across multiple origins.
While creating messageChannel, it internally creates two ports to sending the data and forwarded to another browsing context.
postMessage() − Post the message throw channel
postMessage() − Post the message throw channel
start() − It sends the data
start() − It sends the data
close() − It close the ports
close() − It close the ports
In this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to DOM.
var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);
Above code, it is taking the data from port 2, now it will pass the data to second iframe
var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);
Now second document handles the data by using the portMsgHandler function.
var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <foo@example.com> to game circle.';