Sharing the basic usage of postMessage API in HTML5-H5 Tutorial-php.cn

Sharing the basic usage of postMessage API in HTML5

黄舟

Release： 2017-03-15 16:26:07

Original

2197 people have browsed it

window.postMessage is often used by people for cross-domain data transfer. The following will introduce to you the postMessage API basic usage tutorial in HTML5. Friends in need can refer to

About postMessage

window.postMessage Although it is a function of html5, it supports IE8+. If your website does not need to support IE6 and IE7 , then you can use window.postMessage. Regarding window.postMessage, many friends said that it can support cross-domain. Yes, window.postMessage is a direct data transfer between the client and the client. It can be transferred across domains or in the same domain.

Application Scenario

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复制内容到剪贴板
//弹出一个新窗口   
var domain = &#39;http://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);

Copy after login

To delay, we usually use the timer setTimeout to delay and then use it.

Accepted pages

JavaScript Code复制内容到剪贴板
//监听消息反馈   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;http://haorooms.com&#39;) return; //这个判断一下是不是我这个域名跳转过来的   
    console.log(&#39;received response:  &#39;,event.data);   
},false);

Copy after login

## are as follows Picture, accept the page and get the data

Sharing the basic usage of postMessage API in HTML5

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

JavaScript Code复制内容到剪贴板
//捕获iframe   
var domain = &#39;http://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);

Copy after login

##Accept data

JavaScript Code复制内容到剪贴板
//响应事件   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;http://haorooms.com&#39;) return;   
    console.log(&#39;message received:  &#39; + event.data,event);   
    event.source.postMessage(&#39;holla back youngin!&#39;,event.origin);   
},false);

Copy after login

##The above code snippet is to feed back information to the message source to confirm that the message has been received. The following are some of the more important event

properties

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.

Calling the instance

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

JavaScript Code复制内容到剪贴板
<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>

Copy after login

In the client's compute.js, it simply repeats the sum operation multiple times, and finally returns the result to the main server through the postMessage method. The purpose of a thread 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.

2. Call the postMessage method in compute.js to return the calculation result

JavaScript Code复制内容到剪贴板
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());

Copy after login

The above is the detailed content of Sharing the basic usage of postMessage API in HTML5. For more information, please follow other related articles on the PHP Chinese website!