HTML5中的postMessage API基础应用实例教程

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

有关postMessage

window.postMessage尽管说是html5的作用,可是适用IE8+,倘若你的网站不必须适用IE6和IE7,那末可使用window.postMessage。有关window.postMessage,许多盆友说他能够适用跨域,非常好,window.postMessage是顾客端和顾客端立即的数据信息传送,既能够跨域传送,还可以同域传送。

运用情景

我只是简易的举1个运用情景,自然,这个作用许多地区可使用。

倘若你有1个网页页面,网页页面中拿到一部分客户信息内容,点一下进到此外1个网页页面,此外的网页页面默认设置是取不到客户信息内容的,你能够根据window.postMessage把一部分客户信息内容传到这个网页页面中。(自然,你要考虑到安全性性等层面。)

编码举例

推送信息内容:

JavaScript Code拷贝內容到剪贴板
  1. //弹出1个新对话框   
  2. var domain = 'http://haorooms.com';   
  3. var myPopup = window.open(domain    
  4.             + '/windowPostMessageListener.html','myWindow');   
  5.   
  6. //周期性的推送信息   
  7. setTimeout(function(){   
  8.     //var message = '当今時间是 ' + (new Date().getTime());    
  9.         var message = {name:"站点",sex:"男"}; //你在这里还可以传送1些数据信息,obj等   
  10.     console.log('传送的数据信息是  ' + message);   
  11.     myPopup.postMessage(message,domain);   
  12. },1000);  

要延迟时间1下,大家1般用计时器setTimeout延迟时间再发用。

接纳的网页页面

JavaScript Code拷贝內容到剪贴板
  1. //监视信息意见反馈   
  2. window.addEventListener('message',function(event) {   
  3.     if(event.origin !== 'http://haorooms.com'return; //这个分辨1下是否我这个网站域名自动跳转过来的   
  4.     console.log('received response:  ',event.data);   
  5. },false);  

以下图,接纳网页页面获得数据信息

假如是应用iframe,编码应当这样写:

JavaScript Code拷贝內容到剪贴板
  1. //捕捉iframe   
  2. var domain = 'http://haorooms.com';   
  3. var iframe = document.getElementById('myIFrame').contentWindow;   
  4.   
  5. //推送信息   
  6. setTimeout(function(){   
  7.     //var message = '当今時间是 ' + (new Date().getTime());    
  8.         var message = {name:"站点",sex:"男"}; //你在这里还可以传送1些数据信息,obj等   
  9.     console.log('传送的数据信息是:  ' + message);   
  10.         //send the message and target URI   
  11.     iframe.postMessage(message,domain);    
  12. },1000);  

接纳数据信息

JavaScript Code拷贝內容到剪贴板
  1. //回应恶性事件   
  2. window.addEventListener('message',function(event) {   
  3.     if(event.origin !== 'http://haorooms.com'return;   
  4.     console.log('message received:  ' + event.data,event);   
  5.     event.source.postMessage('holla back youngin!',event.origin);   
  6. },false);  

上面的编码片断是往信息源意见反馈信息内容,确定信息早已收到。下面是几个较为关键的恶性事件特性:

source – 信息源,信息的推送对话框/iframe。
origin – 信息源的URI(将会包括协议书、网站域名和端口号),用来认证数据信息源。
data – 推送方推送给接受方的数据信息。

启用案例
1. 主进程中建立 Worker 案例,并监视 onmessage 恶性事件

JavaScript Code拷贝內容到剪贴板
  1. <html>    
  2. <head>    
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso⑻859⑴">    
  4. <title>Test Web worker</title>    
  5. <script type="text/JavaScript">    
  6.  function init(){    
  7.   var worker = new Worker('compute.js');    
  8.   //event 主要参数中有 data 特性,便是子进程中回到的結果数据信息   
  9.   worker.onmessage= function (event) {    
  10.    // 把子进程回到的結果加上到 div 上   
  11.    document.getElementById("result").innerHTML +=    
  12.       event.data+"<br/>";    
  13.   };    
  14.  }    
  15. </script>    
  16. </head>    
  17. <body onload="init()">    
  18. <div id="result"></div>    
  19. </body>    
  20. </html>  

在顾客端 compute.js 中,只是简易的反复数次加和实际操作,最终根据 postMessage 方式把結果回到给主进程,目地便是等候1段時间。而在这段時间内,主进程不可该被堵塞,客户能够根据拖拽访问器,增大变小访问器对话框等实际操作检测这1状况。这个非堵塞主进程的結果便是 Web Workers 想做到的目地。

2. compute.js 中启用 postMessage 方式回到测算結果

JavaScript Code拷贝內容到剪贴板
  1. var i=0;    
  2.   
  3. function timedCount(){    
  4.  for(var j=0,sum=0;j<100;j++){    
  5.   for(var i=0;i<100000000;i++){    
  6.    sum+=i;    
  7.   }    
  8.  }    
  9.  // 启用 postMessage 向主进程推送信息   
  10.  postMessage(sum);    
  11. }    
  12.   
  13. postMessage("Before computing,"+new Date());    
  14. timedCount();    
  15. postMessage("After computing,"+new Date());