Home >Web Front-end >HTML Tutorial >Basic use of postMessage API in HTML5

Basic use of postMessage API in HTML5

不言Original: 2018-06-09 17:34:181884browse

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

About postMessage

Although window.postMessage is said to be a function of HTML5, it supports IE8. If your website does not need to support IE6 and IE7, 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 information:

//弹出一个新窗口   
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);

To delay, we usually use timing The setTimeout delay is used again.

Accepted page

//监听消息反馈   
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);

As shown below, the accepting page gets data

2016520115816771.png (507×161)

If iframe is used, the code should be written like this ：

//捕获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);

Accept data

//响应事件   
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);

The above code snippet 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.

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

<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, just simply repeat The sum operation is performed once, and finally the result is returned 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.

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

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());

The above is the entire content of this article. I hope it will be helpful to everyone's learning. More related Please pay attention to the PHP Chinese website for content!

Related recommendations:

New eight types of INPUT input for HTML5

How to use HTML5 to operate WebSQL database

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

php html5 线程主线程 JS 事件 input 数据库

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Html rendering to implement the * sign in front of required fields in AndroidNext article：How to use Html rendering to implement the * sign in front of required fields in Android

See more

Basic use of postMessage API in HTML5

Related articles