HTML5 Web Messaging is used to override the communication problem by the events passed. Following are the concepts covered.

• About Web messaging
• Channel messaging

Web Messaging is used to share the data by separating the browsing context without using DOM and overrides the problems faced in cross domain communication in different domains, protocols or ports. In order to send the data from user's web page, add the container which is present in a frame or vice – versa.Then, the browser sends security alert instead of that user can share the data by using a message event. Web messaging Events Web messaging events is used in action on a Cross document messaging, channel messaging, server sent events, web sockets. These are described below.

In order to send cross document message, create a web browser using frame or new window, then send the data by using the postMessage () and it has 2 arguments as shown below. The code below is used to demonstrate sending message from the iframe button. [c]var iframe = document.querySelector('iframe'); var button = document.querySelector('button'); var clickHandler = function(){ iframe.contentWindow.postMessage('The message to send.','https://www.splessons.com'); } button.addEventListener('click',clickHandler,false); [/c] The code below is used to demonstrate receiving a cross document message in the receiving document. [c]var messageEventHandler = function(event){ // check that the origin is one we want. if(event.origin == 'https://www.splessons.com'){ alert(event.data); } } window.addEventListener('message', messageEventHandler,false); [/c]

Channel Messaging is the two way communication for the browsing contexts, which is a usable communication across multiple origins. If user can create a message channel it internally creates two ports for sending and forwarding to another browser context as shown below. The code below is used to start sending the data between the iframes. Here user invoked the data function and also passed the data to the DOM. [c]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); [/c] The code below is used to demonstrate the data which came from the port 2 and is passed to the second iframe. [c]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); [/c] The code below is used to demonstrate the portMessageHandler function which is used by the second document. [c]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.'; messageEvent.ports[0].postMessage(msg); } document.forms[0].addEventListener('submit',formHandler,false); } window.addEventListener('message',messageHandler,false); } window.addEventListener('DOMContentLoaded',loadHandler,false); [/c]

• By using Web Messaging data can be shared without using DOM.
• Two way communication is possible by using Channel Messaging.
• For sending the document user need to create iframe.