• 技术文章 >web前端 >js教程

    你对javascript中的postMessage怎么用吗?

    藏色散人藏色散人2021-09-12 16:44:06转载242

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

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:怎么彻底删除nodejs 下一篇:深入了解Node.js中的四大流,解决“背压”问题
    线上培训班

    相关文章推荐

    • JavaScript怎么去掉结尾空格• javascript函数有哪些• javascript中window.$是什么意思• javascript如何取指定字符

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网