你对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，可以互相通信。

推荐学习：《javascript基础教程》

以上就是你对javascript中的postMessage怎么用吗？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！