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

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

复制代码

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

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

// 监听事件
window.onmessage = function(e) {
// 判断消息来源
if (e.origin !== 'http://tkxxd.com') {
return;
}
// 显示父窗口的消息
document.getElementById("test").innerHTML = e.origin + " said: " + e.data;
};

复制代码

同理，b.html向父窗口发消息

window.parent.postMessage('test', 'http://tkxxd.com');

复制代码

a.html接收消息

window.addEventListener('message', function(e) {
alert(e.data);
},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 事件

<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>
<body onload="init()">
<div id="result"></div>
</body>
</html>

复制代码

在客户端的 compute.js 中，只是简单的重复多次加和操作，最后通过 postMessage 方法把结果返回给主线程，目的就是等待一段时间。而在这段时间内，主线程不应该被阻塞，用户可以通过拖拽浏览器，变大缩小浏览器窗口等操作测试这一现象。这个非阻塞主线程的结果就是 Web Workers 想达到的目的。
清单 2. compute.js 中调用 postMessage 方法返回计算结果

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

复制代码

帐号		自动登录	找回密码
密码			注册

HTML5 跨域通信方法postMessage

相关帖子