天空小小岛技术论坛

 找回密码
 注册
搜索
查看: 4432|回复: 1

HTML5 跨域通信方法postMessage

[复制链接]
s.Bo 发表于 2014-9-15 20:37:42 | 显示全部楼层 |阅读模式
postMessage 是 HTML5 新方法,它可以实现跨域窗口之间通讯。到目前为止,只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持
该法用于不同域或浏览器不同线程之间的通信,如 Web Workers

举个简单的不同域iframe的例子:
tkxxd.com/a.html中代码
a.html中iframe了一个另一个域 tkxxd.net 下的b.html

  1. // 获取b.html的窗体对象
  2. var win = document.getElementById("iframe").contentWindow;
  3. // 向b.html发送消息
  4. win.postMessage({'a':'xxxxxxxx'}, 'http://tkxxd.net');
复制代码


window.postMessage(message, targetOrigin [, transfer ] )
这个函数传递二个参数,第一个参数即你要发送的数据,第二个参数主要是出于安全的考虑,一般填写允许通信的域名

tkxxd.net下的 b.html 接收消息代码:

  1. // 监听事件
  2. window.onmessage = function(e) {
  3.     // 判断消息来源
  4.     if (e.origin !== 'http://tkxxd.com') {
  5.         return;
  6.     }
  7.     // 显示父窗口的消息
  8.     document.getElementById("test").innerHTML = e.origin + " said: " + e.data;
  9. };
复制代码


同理,b.html向父窗口发消息
  1. window.parent.postMessage('test', 'http://tkxxd.com');
复制代码


a.html接收消息
  1. window.addEventListener('message', function(e) {
  2.     alert(e.data);
  3. },false);
复制代码



参考: http://dev.w3.org/html5/postmsg/

 楼主| s.Bo 发表于 2014-9-15 21:04:32 | 显示全部楼层
在 Web Workers 中使用 postMessage 和 onmessage

首先,需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程中运行的 JavaScript 文件名称。然后在这个实例上监听 onmessage 事件。最后另一个线程中的 JavaScript 就可以通过调用 postMessage 方法在这两个线程间传递数据了。

清单 1. 主线程中创建 Worker 实例,并监听 onmessage 事件
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  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 方法把结果返回给主线程,目的就是等待一段时间。而在这段时间内,主线程不应该被阻塞,用户可以通过拖拽浏览器,变大缩小浏览器窗口等操作测试这一现象。这个非阻塞主线程的结果就是 Web Workers 想达到的目的。
清单 2. compute.js 中调用 postMessage 方法返回计算结果

  1. var i=0;

  2. function timedCount(){
  3.          for(var j=0,sum=0;j<100;j++){
  4.                  for(var i=0;i<100000000;i++){
  5.                          sum+=i;
  6.                  }
  7.          }
  8.          // 调用 postMessage 向主线程发送消息
  9.          postMessage(sum);
  10. }

  11. postMessage("Before computing,"+new Date());
  12. timedCount();
  13. postMessage("After computing,"+new Date());
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|Archiver|天空小小岛 ( 京ICP备17043412号-1|

GMT+8, 2018-11-20 01:32 , Processed in 0.114861 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表