HTML5中的postMessage API基本使用教程

2020-04-21 23:31:26易采站长站整理

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

接受数据

JavaScript Code复制内容到剪贴板

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

上面的代码片段是往消息源反馈信息,确认消息已经收到。下面是几个比较重要的事件属性:

source – 消息源,消息的发送窗口/iframe。
origin – 消息源的URI(可能包含协议、域名和端口),用来验证数据源。
data – 发送方发送给接收方的数据。

调用实例
1. 主线程中创建 Worker 实例,并监听 onmessage 事件

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(‘compute.js’);    
  //event 参数中有 data 属性,就是子线程中返回的结果数据   
  worker.onmessage= function (event) {    
   // 把子线程返回的结果添加到 div 上   
   document.getElementById("result").innerHTML +=    
      event.data+"<br/>";    
  };    
 }    
</script>    
</head>