美文网首页
新开tab页面通信-Easy!

新开tab页面通信-Easy!

作者: 初空 | 来源:发表于2022-04-04 15:14 被阅读0次

    相信当你Google 这种问题的时候,一定是有相关的需求了不墨迹上代码

    父页面

    假设父页面地址:https://aaa.bbb.com

       const docu = window.open('https://xxx.xxx.com/brain?xxx=xxxx');
       let token = getParam('_token'); //需要向新开页面传递信息
       docu.postMessage({ token }, 'https://xxx.xxx.com');
      
       // 结束子页面的信息
       window.addEventListener("message", (event) => {
          const origin = event.origin;
         if (origin !== "https://xxx.xxx.com" ) return; //不是允许的我不要
          /**
            相应业务逻辑 code
          **/
       });
    

    子页面

    假设父页面地址:https://xxx.xxx.com

    window.addEventListener("message", (event) => {
          const origin = event.origin;
         if (origin !== "https://aaa.bbb.com" ) return; //不是允许的我不要
          /**
            相应业务逻辑 code
          **/
        // 告知父页面 我收到信息了
          event.source.postMessage("Success","https://aaa.bbb.com");
       });
    

    相关文章

      网友评论

          本文标题:新开tab页面通信-Easy!

          本文链接:https://www.haomeiwen.com/subject/xwucsrtx.html