JS跨域--H5 postMessage

window.postMessage是html5中新增了一个新的跨域方法，可以用它向其他window对象发送消息，即使不同源也是可以发送消息。

兼容性：目前IE8+、FireFox、Chrome、Opera等浏览器都支持

postMessage的参数

参数	描述
data	是传递过来的message
source	发送消息的窗口对象
origin	发送消息窗口的源（协议+主机+端口号）

1.向iframe中传递数据

当前页面

目标页面

window.onmessage = function(e){
    e = e || event;
    var content = document.getElementById('content');
    content.innerHTML = e.data;
}

2.新窗口传递数据

必须window.open打开的新窗口才能通信，在新窗口打开的时候，我们需要指定打开页面的window.name。

当前窗口 （a页面）

点我我更换传递信息  

新窗口 （b页面）

window.onmessage = function(e) {
    e = e || event;
    if(event.origin !== 'http://localhost:8089') return;
    alert(e.data);
    //执行成功反馈消息
    event.source.postMessage('success',event.origin);
}