HTML5 - SPLessons

HTML5 Web Messaging

Chapter 26

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Web Messaging

HTML5 Web Messaging

shape Introduction

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

  • About Web messaging
  • Channel messaging

About Web messaging

shape Description

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.

Attributes Description
data Used to store the string data.
origin Used to store the domain name and port.
source Used to store a originating document window.
ports Used to store the is sent by any message port.
lastEventId Used to store the unique identifier of the current message event.

Cross Document message

shape Description

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.

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);

The code below is used to demonstrate 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.splessons.com'){
      alert(event.data);
	}
}
window.addEventListener('message', messageEventHandler,false);

Channel messaging

shape Description

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.

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);

The code below is used to demonstrate the data which came from the port 2 and is passed to the 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);

The code below is used to demonstrate the portMessageHandler function which is used by the second document.

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);

Summary

shape Points

  • 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.