美文网首页
新开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!

    相信当你Google 这种问题的时候,一定是有相关的需求了不墨迹上代码 父页面 假设父页面地址:https://a...

  • window.open与this.$router.resolve

    跳到第三方网站 配合vue-router新开一个tab页面 以上写法在火狐浏览器里会出现新开页面后退出登录的现象。...

  • js 监听浏览器页面显示隐藏的状态

    背景: 用户最小化浏览器窗口, 再次进入, 页面数据不更新的问题 例子: 页面有活动倒计时, 当用户新开 tab ...

  • 进程,线程梳理 - 2023-02-12

    进程,线程 浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程...

  • ionic踩坑

    1. tab+NavController 使用tab组件,执行页面跳转后,新页面仍然会包含tab,很多时候我们希望...

  • 前端跨页面通信

    跨页面通信主要分两大类 同源页面间的跨页面通信 非同源页面间的跨页面通信 同源页面间的跨页面通信 1.BroadC...

  • (转)TabLayout 踩坑之 onTabSelected 没

    最近项目中有个需求:一个页面顶部有3个tab,每一个tab分别展示一个不同的页面,点击tab 切换到对应页面。进入...

  • 路由跳转

    打开新页面 页面重定向 页面返回 Tab 切换 页面重定向

  • 微信小程序开发分享

    令人舒适的Tab页面交互效果? tab页面的交互效果,感觉挺有讲究,有许多小细节在里面。 不过使用Tab先要确定方...

  • app store下载时一直转圈圈导致无法下载

    解决办法:关机,重新开机!so easy!

网友评论

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

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