Using PostMessage to transfer data between two web pages in HTML5

Time:2021-4-20

It is estimated that few people know that there is one in HTML5 APIs window.postMessage API。 window.postMessage The function of is to allow programmers to send data information between two windows / frames across domains. Basically, it’s like cross domain Ajax, but instead of interacting between the browser and the server, it communicates between two clients. Let’s take a look window.postMessage How it works. All browsers except IE6 and IE7 support this function.

Data sender

The first thing we need to do is to create the communication initiator, which is the data 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 data every 6 seconds, and then create a message listener to listen to its feedback information from the target window.

JavaScript CodeCopy content to clipboard
  1. //A new window pops up  
  2. var domain = ‘http://scriptandstyle.com’;   
  3. var myPopup = window.open(domain    
  4.             + ‘/windowPostMessageListener.html’,‘myWindow’);   
  5.   
  6. //Sending messages periodically  
  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);   
  13.   
  14. // Monitor message feedback  
  15. window.addEventListener(‘message’,function(event) {   
  16.  if(event.origin !== ‘http://scriptandstyle.com’return;   
  17.  console.log(‘received response:  ‘,event.data);   
  18. },false);   
  19.   

I use it here window.addEventListener But in ie, this is not OK, because ie uses window.attachEvent . If you don’t want to judge the type of browser, you can use some tool libraries, such as jQuery or dojo.

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

We also create an event listener to receive feedback. It is extremely important that you verify the URI of the source of the message! Only when the target party is legal can you process the message it sends.

If you are using iframe, the code should be as follows:

JavaScript CodeCopy content to clipboard
  1. // Capture iframe  
  2. var domain = ‘http://scriptandstyle.com’;   
  3. var iframe = document.getElementById(‘myIFrame’).contentWindow;   
  4.   
  5. //Send 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);   
  12.   

Make sure you use the contentwindow property of the iframe, not the node object.

Data receiving terminal

Next we want to develop the page of the data receiving end. There is an event listener in the receiver window to listen for the “message” event. Similarly, you need to verify the address of the message source. The message can come from any address. Make sure the message is from a trusted address.

JavaScript CodeCopy content to clipboard
  1. //Response events  
  2. window.addEventListener(‘message’,function(event) {   
  3.  if(event.origin !== ‘http://davidwalsh.name’return;   
  4.  console.log(‘message received:  ‘ + event.data,event);   
  5.  event.source.postMessage(‘holla back youngin!’,event.origin);   
  6. },false);   
  7.   

The above code fragment is to feed back information to the message source to confirm that the message has been received. Here are some important event attributes:

source –Message source, message sending window / iframe.
origin –The URI of the message source, which may contain the protocol, domain name, and port, is used to verify the data source.
data –Data sent by the sender to the receiver.

These three attributes are the data that must be used in message transmission.

use window.postMessage

Like other web technologies, if you don’t verify the validity of the data source, it will become very dangerous to use this technology; the security of your application requires you to be responsible for it. window.postMessage It’s like PHP versus JavaScript. window.postMessage It’s cool, isn’t it?

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.