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