JS跨域--H5 postMessage

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

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

postMessage的参数

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