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 可以实现父子页面之间的通信