HTML5 window. postMessage API

Window. postMessage is a little-known HTML5 API. Window. postMessage allows two windows/frames to send data messages across domains. In essence, window. postMessage is a cross-domain Ajax without server gaskers. Let's take a look at the example of window. postMessage and how to use it in Firefox, IE8 +, Opera, Safari, and Chrome browsers.

Part 1: sender
The first step of the program is to create a source. In this source, we will open a window (or iframe, if you prefer ), send a message to another new window (for example, we will send a message every 6 seconds and create an event listener to listen to any response we receive from the target window .)

 

The Code is as follows:

Copy code

// Create a dialog box Var domain = 'HTTP: // hzhuti.com '; Var myPopup = window. open (domain + '/windowPostMessageListener.html', 'mywindow '); // Send a message SetInterval (function (){ Var message = 'Hello! The time is: '+ (new Date (). getTime ()); Console. log ('blog. local: sending message: '+ message ); MyPopup. postMessage (message, domain); // send the message and target URI },6000 ); // Listen for replies Window. addEventListener ('message', function (event ){ If (event. origin! = 'HTTP: // hzhuti.com ') return; Console. log ('stored ed response: ', event. data ); }, False); // create a pop-up window Var domain = 'HTTP: // hzhuti.com '; Var myPopup = window. open (domain + '/windowPostMessageListener.html', 'mywindow '); // Send a message SetInterval (function (){ Var message = 'Hello! The time is: '+ (new Date (). getTime ()); Console. log ('blog. local: sending message: '+ message ); MyPopup. postMessage (message, domain); // send the message and target URI },6000 ); // Listen for replies Window. addEventListener ('message', function (event ){ If (event. origin! = 'HTTP: // hzhuti.com ') return; Console. log ('stored ed response: ', event. data ); }, False );

I use the window. addEventListener method that cannot work in IE (window. attachEvent method in IE ). You can use the MooTools/jQuery/Dojo library for compatibility processing.

Assuming that the window is opened correctly, the URI information (including the protocol, host name, and port) specified for the message to be sent ), the message must exist at the time (because the user may have changed the address of the subsequent window). If the target window does not exist, the message cannot be sent.

We also created an event handler for receiving messages. This is very important. You must verify the event origin when receiving a message because the message handler accepts messages from any URI! Once the origin is verified, You can process the received message in any way you like.

Iframe is used as follows:

The Code is as follows:

Copy code

// Create a dialog box Var domain = 'HTTP: // hzhuti.com '; Var iframe = document. getElementById ('myiframe'). contentWindow; // Send a message SetInterval (function (){ Var message = 'Hello! The time is: '+ (new Date (). getTime ()); Console. log ('blog. local: sending message: '+ message ); Iframe. postMessage (message, domain); // send the message and target URI }, 6000); // create a pop-up window Var domain = 'HTTP: // hzhuti.com '; Var iframe = document. getElementById ('myiframe'). contentWindow; // Send a message SetInterval (function (){ Var message = 'Hello! The time is: '+ (new Date (). getTime ()); Console. log ('blog. local: sending message: '+ message ); Iframe. postMessage (message, domain); // send the message and target URI },6000 );

You must access the contentWindow attribute of iframe, not the node itself.

Part 2: target window
The second part of the program is the preparation of the target window. The event listener for the "message" event is created in the target window, and the source of the information should be verified. Similarly, message events are accepted from any location. Therefore, it is important to create a trust source list to verify the sources.

The Code is as follows:

Copy code

// Bind a message event Window. addEventListener ('message', function (event ){ If (event. origin! = 'HTTP: // www.bkjia.com ') return; Console. log ('message received ed: '+ event. data, event ); Event. source. postMessage ('holla back youngin! ', Event. origin ); }, False); // bind a message event Window. addEventListener ('message', function (event ){ If (event. origin! = 'HTTP: // www.hzhuti.com ') return; Console. log ('message received ed: '+ event. data, event ); Event. source. postMessage ('holla back youngin! ', Event. origin ); }, False );

The sample code above is to send a message to the sender in the target window and confirm that the message has been received. These event attributes are very important:
Source -- the source window for sending messages or iframe
Origin -- URI of the message to be sent (including the protocol, domain name, and port, if any)
Data-received message content

These three attributes are very important for message verification.

Note when using window. postMessage
Like other web technologies, improper use is dangerous. If the message source is not verified, it threatens the security of the application. Window. postmessage is like a JavaScript PHP Technology. Window. postMessage is cool, isn't it?