Home >Web Front-end >HTML Tutorial >Detailed graphic and text explanation of postMessage API in H5 Detailed introduction

Detailed graphic and text explanation of postMessage API in H5 Detailed introduction

php中世界最好的语言Original: 2017-12-02 14:45:053783browse

Regarding postMessage, although it is a function of html5, it supports IE8+. If your website does not need to support IE6 and IE7, you can use window.postMessage. It can be transferred across domains or within the same domain.

I am just giving a simple application scenario. Of course, this function can be used in many places.

If you have a page and get part of the user information on the page, click to enter another page. The other pages cannot get the user information by default. You can pass part of the user information to the page through window.postMessage. in this page. (Of course, you have to consider security and other aspects.)

Code example

Send message:

JavaScript Code copy content to clipboard

//弹出一个新窗口   
var domain = &#39;https://haorooms.com&#39;;   
var myPopup = window.open(domain    
            + &#39;/windowPostMessageListener.html&#39;,&#39;myWindow&#39;);   
  
//周期性的发送消息   
setTimeout(function(){   
    //var message = &#39;当前时间是 &#39; + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log(&#39;传递的数据是  &#39; + message);   
    myPopup.postMessage(message,domain);   
},1000);

To To delay it, we usually use the timer setTimeout to delay it before sending it.

Accepted page

JavaScript Code copies content to the clipboard

//Listen to message feedback

window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;https://haorooms.com&#39;) return; //这个判断一下是不是我这个域名跳转过来的   
    console.log(&#39;received response:  &#39;,event.data);   
},false);

As shown below, the accepted page gets data

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

JavaScript Code copies the content to the clipboard

//捕获iframe   
var domain = &#39;https://haorooms.com&#39;;   
var iframe = document.getElementById(&#39;myIFrame&#39;).contentWindow;   
  
//发送消息   
setTimeout(function(){   
    //var message = &#39;当前时间是 &#39; + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log(&#39;传递的数据是:  &#39; + message);   
        //send the message and target URI   
    iframe.postMessage(message,domain);    
},1000);

Accepts data

JavaScript Code copies the content to the clipboard Board

//响应事件   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;https://haorooms.com&#39;) return;   
    console.log(&#39;message received:  &#39; + event.data,event);   
    event.source.postMessage(&#39;holla back youngin!&#39;,event.origin);   
},false);

The code snippet above is to feed back information to the message source and 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.

Call the instance
Create a Worker instance in the main thread and listen to the onmessage event

JavaScript Code copies content to the clipboard

<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
<title>Test Web worker</title>    
<script type="text/JavaScript">    
 function init(){    
  var worker = new Worker(&#39;compute.js&#39;);    
  //event 参数中有 data 属性，就是子线程中返回的结果数据   
  worker.onmessage= function (event) {    
   // 把子线程返回的结果添加到 p 上   
   document.getElementById("result").innerHTML +=    
      event.data+"<br/>";    
  };    
 }    
</script>    
</head>    
<body onload="init()">    
<p id="result"></p>    
</body>    
</html>

In the client's compute.js, it simply repeats the sum operation multiple times, and finally returns the result to the main thread through the postMessage method. The purpose is to wait for a period of time. During this period, the main thread should not be blocked. Users can test this phenomenon by dragging the browser, enlarging or shrinking the browser window, etc. The result of this non-blocking main thread is what Web Workers want to achieve.

Calling the postMessage method in compute.js returns the calculation result

JavaScript Code copies the content to the clipboard

var i=0;    
function timedCount(){    
 for(var j=0,sum=0;j<100;j++){    
  for(var i=0;i<100000000;i++){    
   sum+=i;    
  }    
 }    
 // 调用 postMessage 向主线程发送消息   
 postMessage(sum);    
}    
  
postMessage("Before computing,"+new Date());    
timedCount();    
postMessage("After computing,"+new Date());

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

Detailed graphic and text explanation of postMessage API in H5 Detailed introduction

Related articles