html5 postMessage
hmtl5 推出postMessage后，在解决跨文档消息通信、及跨域请求数据的问题 时方便了很多。
一、postMessage的使用方法：
otherWindow.postMessage(message, targetOrigin, [transfer]);
参数含义：
otherWindow：要接收信息页面的window的引用
message: 要发送的信息，可以是string，也可以是object，具体的兼容性请看文章最后
targetOrigin:标识要发向的哪个目标源，可以是一个url地址，也可是“*”表示不作限制
另一个页面可以通过以下的方式监听message事件
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== "http://example.org:8080")
return;
// ...
}
二、postMessage实例
下面我们用一个实例来看看postMessage的应用：
为了实现不同域之间的通信，需要在操作系统的 hosts 文件添加两个域名，进行模拟。
代码1：hosts文件中添加两个不同的域名
127.0.0.1 sx.daily.taobao.net
127.0.0.1 sx.taobao.com
在父网页中通过 iframe 嵌入子页面。
代码2.
<!DOCTYPE html>
<html>
<head>
<title>门户页</title>
<meta charset="utf-8"/>
</head>
<body>
<div>
输出的内容是：<span id="msg"></span>
</div>
<!-- 通过 iframe 嵌入子页面 -->
<iframe id="widget" src="http://sx.daily.taobao.net/study/postMessage/chat.html" frameborder="0"></iframe>
<script>
var fromOrigin = "http://sx.daily.taobao.net"; //iframe来自的源
function msgHandler(e){
if(e.origin == fromOrigin){
notify(e.data);
}else{
//忽视
}
}
function notify(data){
var msg = document.querySelector('#msg');
msg.innerText = data.msg;
console.log(data);
}
window.addEventListener('message',msgHandler,true);
</script>
</body>
</html>
在子窗口中监听 onmessage 事件，并在 JavaScript 代码中调用 postMessage 方法发送数据到父窗口
代码3.
<!DOCTYPE html>
<html>
<head>
<title>聊天件</title>
<meta charset="utf-8"/>
<style>
body{
background: #fb0;
height: 200px;
}
</style>
</head>
<body>
<h2>chat页面</h2>
<input id="txtCont" type="text" value=""/>
<button id="btnSend">发送</button>
<script>
var targOrigin = "http://sx.taobao.com"; //要发向的目标源
var btn = document.querySelector('#btnSend');
var txt = document.querySelector('#txtCont');
function sendMsg(){
//支持情况 ie9及以上，注意，ie9只支持字符.部分ie8支持
//chrome
if(window.top.postMessage){
//有些浏览器支持javascript对象，canvas imageData等数据类型
//支持情况 ie9下不支持 ie9支持 postMessage的值为字符串，不支持对象。ie10及以上支持对象
//如： {'msg':txt.value}
var obj = {'msg':txt.value};
// 通过 postMessage 向父窗口发送数据
window.top.postMessage(obj,targOrigin);
}
};
btn.addEventListener('click',sendMsg,true);
</script>
</body>
</html>
三、各个浏览器的支持情况
写完上面的demo后，我所它放到常用的浏览器里测试了一下兼容性：
ie: 支持情况：
ie8 我装的ie8不支持，但发现别的机器ie8支持。
ie9 支持 postMessage的值为字符串，不支持对象。
ie10 及以上支持对象
chrome: 支持
firefox: 支持
后来发现有个网站可以查看html5的支持情况，测试结果如下:
