window.postMessage跨页面通信

H5的的新特性 window.postMessage 可以支持不同的页面间通信。

API如下：

发送信息，

window.postMessage( data , origin );//data代表的是发送是数据，origin用来限制访问来源，也可以用*代替

window代表的是接收消息的窗口，

接受信息，

window.addEventListener('message',function(e){

    var ev = e || event;
    console.log(ev.data);
});//事件监听

一般用于是iframe与父页面之间的通信，

父页面：

<iframe id="iframe" src="html/b.html" onload=""></iframe>
    <script>
        window.onload = function () {
            var iframe = document.getElementById('iframe');
            var win = iframe.contentWindow; // 获取iframe窗口对象
            win.postMessage( 3, '*');
            var count = document.getElementById('count');
        };
        window.onmessage = function (e) {
            var ev = e || event;
            count.innerText = ev.data;
            console.log(ev.data);
        }
    </script>

子页面：

<button id="btn">点击</button>
<script>
    var btn = document.getElementById('btn');
    var i = 0;
    btn.addEventListener('click' , function () {
        i++;
        window.parent.postMessage(i , 'www.baidu.com'); // 回调
    });

    window.addEventListener('message' ,function (e ) {
        console.log(e.data)
    })
</script>

总结：window.postMessage 可以实现父子页面之间的通信