关于javascript:javascript中的postMessage

父页面、子页面，两页面不同域，之间对话用到了 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，能够相互通信