欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

你对javascript中的postMessage怎么用吗?

程序员文章站 2022-03-02 17:10:43
...

父页面、子页面,两页面不同域,之间对话用到了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怎么用吗?的详细内容,更多请关注其它相关文章!

相关标签: javascript