父页面、子页面,两页面不同域,之间对话用到了postMessage。下面为了方便统称为F、C页。
C页按钮的点击事件向F页发送一个消息小C,F页收到消息小C执行逻辑LC,LC执行完毕,F页向C页发送一个消息小F,C页收到消息小F执行逻辑LF。一句话,就是F、C页间相互通信。
可以认为
类似于react中的父子组件通信。
C页js代码:
var btnObj = document.getElementById('buttons'); btnObj.onclick = function(){ var defaultAdData = { type:'advert', gameData:{ adId: '123' } }; window.parent.postMessage(JSON.stringify(defaultAdData), '*'); /*我是错误代码: var receiveMessage = function(event) { var datas = JSON.parse(event.data); if (datas.type === "adGivePrize"&&datas.givePrize) { alert(‘click’); } } window.addEventListener("message", receiveMessage, false);*/ } /*我是正确代码: var receiveMessage = function(event) { var datas = JSON.parse(event.data); if (datas.type === "adGivePrize"&&datas.givePrize) { alert(‘click’); } } window.addEventListener("message", receiveMessage, false);*/
F页js代码:
var receiveMessage = function(event) { var datas = JSON.parse(event.data); if (datas.type === "advert") { var postIframeData = { type:'adGivePrize', givePrize:true }; //iframe发送信息~~~~ window.frames[0].postMessage(JSON.stringify(postIframeData), '*'); } } window.addEventListener("message", receiveMessage, false);
总之,此方法提供了两个不相干页面的通信,使得外建的项目或者内嵌的iframe,可以互相通信。