How to use postMessage to transfer data between two web pages in H5

This time I will show you how to use postMessage in H5 to transfer data between two web pages. How to use postMessage in H5 to transfer data between two web pages? PostMessage What are the precautions for transferring data between two web pages? The following is a practical case, let’s take a look.

It is estimated that few people know that there is a window.postMessage API in HTML5 APIS. The function of window.postMessage 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 at how window.postMessage works. All browsers except IE6 and IE7 support this feature.

Data sending end

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

//弹出一个新窗口   
var domain = 'http://scriptandstyle.com';   
var myPopup = window.open(domain    
            + '/windowPostMessageListener.html','myWindow');   
  
//周期性的发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 myPopup.postMessage(message,domain);   
},6000);   
  
//监听消息反馈   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://scriptandstyle.com') return;   
 console.log('received response:  ',event.data);   
},false);

Here I used window.addEventListener, but this does not work in IE because IE uses window.attachEvent. If you don't want to determine the browser type, you can use some tool libraries, such as jQuery or Dojo.

Assuming that your window pops up normally, we send a message - you need to specify the URI (if necessary, you need to specify the protocol, host, port number, etc.), and 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 information. One thing is extremely important, you must verify the URI of the source of the message! You can only process messages from the target party if it is legitimate.

If you are using an iframe, the code should be written like this:

//捕获iframe   
var domain = 'http://scriptandstyle.com';   
var iframe = document.getElementById('myIFrame').contentWindow;   
  
//发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 iframe.postMessage(message,domain);    
},6000);

Make sure you are using the contentWindow property of the iframe, not the node object.

Data receiving end

What we want to develop next is the page of the data receiving end. There is an event listener in the receiver window that listens for the "message" event. Likewise, you also need to verify the address of the source of the message. Messages can come from any address. Make sure that the message being processed comes from a trusted address.

//响应事件   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://davidwalsh.name') return;   
 console.log('message received:  ' + event.data,event);   
 event.source.postMessage('holla back youngin!',event.origin);   
},false);

The above code snippet is to feed back information to the message source to confirm that the message has been received. The following are several important event attributes:

source – message source, message sending window/iframe.
origin – URI of the message source (may include protocol, domain name and port), used to verify the data source.
data – Data sent by the sender to the receiver.

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

Using window.postMessage

Like many other web technologies, if you do not verify the validity of the data source, using this technology will become very dangerous; your application Security requires you to be responsible for it. window.postMessage is like PHP versus JavaScript technology. window.postMessage is cool, isn't it?

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed steps to create a book management platform using vue.js

How to count table sum in bootstrap The number

#How to use JS to disable and enable buttons

The above is the detailed content of How to use postMessage to transfer data between two web pages in H5. For more information, please follow other related articles on the PHP Chinese website!