跨文档消息传输
HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域+端口号）的web网页之间可以互相通信，甚至可以实现跨域通信。
首先，要想接受从其他的窗口那里发过来的消息，就必须对窗口对象的message事件进行监视。
使用window对象的postMessage方法向其他窗口发送消息。
具体案例主页面中包括一个iframe，iframe的src指向与主页面不在一个域下的网页，这两个网页之间进行消息传输如下：
主页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨文档消息传输示例</title>
</head>
<body>
<iframe src="http://193.168.19.168/ztree/demo/cn/msg.html" width="400" height="400" onload="sendMsg();"></iframe>
<div id="div1">
</div>
<script type="text/javascript" charset="utf-8">
//绑定onmessage事件,接收消息！
addEventListener('message',function(e){
e=e||event;
//e.origin：协议+域名+端口（80默认不显示）
//e.data:消息内容
var obj=JSON.parse(e.data);
if(!obj.error){
alert('接收成功！');
document.getElementById('div1').innerHTML='从e.origin='+e.origin+',那里来的消息e.data='+e.data;
}
},false);
function sendMsg(){
//这里必须获得iframe窗口的window对象
//且不要用document.getElementByTagName('iframe')[0]
var winIframe=window.frames[0];
setTimeout(function(){
//iframe窗口加载完成，使用postMessage向iframe内发送消息
//第一个参数为：消息内容
//第二个参数为：接收消息的对象窗口url,一般与iframe的src一致或url只到端口号http://193.168.19.168/
winIframe.postMessage('{"张三":10,"李四":20,"王五":30,"小明":40,"小白":50,"老五":60,"老周":67}',"http://193.168.19.168/ztree/demo/cn/msg.html");
},2000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe内容</title>
<script type="text/javascript" charset="utf-8">
//绑定onmessage事件,接收消息
addEventListener('message', function(e) {
e = e || event;
//可以过滤域
if (e.origin == 'http://127.0.0.1:8020') {
alert('可以信任的信源');
//接收从e.origin发来的消息e.data
var obj = JSON.parse(e.data), aHtml = [];
for (var key in obj) {
var age = obj[key], str = '';
switch(true) {
case age<=10:
str = key + '小朋友今年' + age + '岁。';
break;
case age<=20:
str = key + '年青人今年' + age + '岁。';
break;
case age<=30:
str = key + '中年人今年' + age + '岁。';
break;
case age<=40:
str = key + '壮汉今年' + age + '岁。';
break;
case age<=50:
str = key + '猛男今年' + age + '岁。';
break;
case age<=60:
str = key + '快退休了，今年' + age + '岁。';
break;
default:
str = key + '老年人今年' + age + '岁。';
break;
}
aHtml.push(str);
}
document.body.innerHTML = '从e.origin=' + e.origin + ',发来的消息e.data=<br />' + aHtml.join('<br />');
} else {
alert('不可信任的消息源');
}
setTimeout(function() {
//e.source即主页面的window对象，使用它向主页面发送消息
e.source.postMessage('{"error":false,"msg":""}', e.origin);
}, 2000);
}, false);
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>