window.postMessage是html5中新增了一个新的跨域方法，可以用它向其他window对象发送消息，即使不同源也是可以发送消息。
兼容性：目前IE8+、FireFox、Chrome、Opera等浏览器都支持
postMessage的参数
| 参数 | 描述 |
|---|---|
| data | 是传递过来的message |
| source | 发送消息的窗口对象 |
| origin | 发送消息窗口的源（协议+主机+端口号） |
1.向iframe中传递数据
当前页面
<script>
function load() {
var iframe = document.getElementById('iframe');
//确保你使用的是iframe的contentWindow属性，而不是节点对象
var win = iframe.contentWindow;
//这里允许跨域地址我们不作限定，你可以自己定义
win.postMessage('我是本地页面传递的文字','*');
}
</script>
<iframe
id="iframe"
src="https://bannerl.github.io/html/domain/domain.html"
onload="load()">
</iframe>
目标页面
window.onmessage = function(e){
e = e || event;
var content = document.getElementById('content');
content.innerHTML = e.data;
}
2.新窗口传递数据
必须window.open打开的新窗口才能通信，在新窗口打开的时候，我们需要指定打开页面的window.name。
当前窗口 （a页面）
<button id="button">点我我更换传递信息</button>
<script>
var host = 'http://localhost:8089';
var newPageUrl = 'http://localhost:8089/b.html';
var newPage = window.open(newPageUrl,"newPage");
var message = '我是a页面传递的数据';
//由于新页面加载完毕后，才能接收消息，所以这里用定时器发送消息，等到消息成功发送后关闭定时器
var timer = setInterval(function(){
newPage.postMessage(message,host);
},200);
//更新数据
var btn = document.getElementById('button');
btn.onclick = function() {
message = '我是a页面传递的数据'+(new Date()).getTime();
newPage.postMessage(message,host);
}
//监听消息反馈
window.addEventListener('message',function(event) {
if(event.data === "success"){
clearInterval(timer);
}
},false);
</script>
新窗口 （b页面）
window.onmessage = function(e) {
e = e || event;
if(event.origin !== 'http://localhost:8089') return;
alert(e.data);
//执行成功反馈消息
event.source.postMessage('success',event.origin);
}
