In HTML5, postMessage is used to transmit data between two webpages. html5postmessage

In HTML5, postMessage is used to transmit data between two webpages. html5postmessage

It is estimated that few people know that there is a window. postMessage API in HTML5 APIS. Window. postMessage allows programmers to send data information across two windows/frames. Basically, it is like cross-origin AJAX, but it is not the interaction between the browser and the server, but the communication between the two clients. Let's take a look at how window. postMessage works. All browsers except IE6 and IE7 support this function.

Data sender

The first thing we need to do is create the communication initiator, that is, the data source "source ". As the initiator, we can open a new window or create an iframe to send data to the new window. For simplicity, we send the message every 6 seconds and then create a message listener, listen to the feedback from the target window.

Copy the content to the clipboard using JavaScript Code

1. // A new window is displayed.
2. Var domain = 'HTTP: // scriptandstyle.com ';
3. Var myPopup = window. open (domain
4. + '/WindowPostMessageListener.html', 'mywindow ');
6. // Periodically send messages
7. SetInterval (function (){
8. Var message = 'Hello! The time is: '+ (new Date (). getTime ());
9. Console. log ('blog. local: sending message: '+ message );
10. // Send the message and target URI
11. MyPopup. postMessage (message, domain );
12. },6000 );
14. // Listen for message feedback
15. Window. addEventListener ('message', function (event ){
16. If (event. origin! = 'HTTP: // scriptandstyle.com ') return;
17. Console. log ('stored ed response: ', event. data );
18. }, False );

Here I use window. addEventListener, but this is not acceptable in IE, because IE uses window. attachEvent. If you do not want to determine the browser type, you can use some tool libraries, such as jQuery or Dojo.

If your window pops up normally, we send a message-you need to specify the URI (protocol, host, port number, and so on if necessary). The message receiver must be on this specified URI. If the target window is replaced, the message will not be sent.

We also created an event listener to receive feedback. It is very important to verify the URI of the message source! Only when the target party is valid can you process the messages sent by the target party.

If iframe is used, the code should be written as follows:

Copy the content to the clipboard using JavaScript Code

1. // Capture iframe
2. Var domain = 'HTTP: // scriptandstyle.com ';
3. Var iframe = document. getElementById ('myiframe'). contentWindow;
5. // Send a message
6. SetInterval (function (){
7. Var message = 'Hello! The time is: '+ (new Date (). getTime ());
8. Console. log ('blog. local: sending message: '+ message );
9. // Send the message and target URI
10. Iframe. postMessage (message, domain );
11. },6000 );

Make sure that you are using the contentWindow attribute of iframe, rather than the Node object.

Data receiving end

The following is the data receiving end page. The receiver window contains an event listener that listens to "message" events. Similarly, you also need to verify the address of the message source. A message can come from any address. Make sure that the message to be processed comes from a trusted address.

Copy the content to the clipboard using JavaScript Code

1. // Respond to the event
2. Window. addEventListener ('message', function (event ){
3. If (event. origin! = 'HTTP: // davysh. name') return;
4. Console. log ('message received ed: '+ event. data, event );
5. Event. source. postMessage ('holla back youngin! ', Event. origin );
6. }, False );

The above code snippets provide feedback to the source to confirm that the message has been received. The following are several important event attributes:

Source-Message Source: the message sending window/iframe.
Origin-The URI (which may contain the protocol, domain name, and port) of the message source to verify the data source.
Data-The data sent by the sender to the receiver.

These three attributes are required for message transmission.

Use window. postMessage

Like other very web technologies, if you do not verify the legitimacy of the data source, using this technology will become very dangerous; you are responsible for the security of your application. Window. postMessage is like PHP relative to JavaScript technology. Window. postMessage is cool, isn't it?

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.