vue2.X下窗口和窗口之间通信

vue2.X下窗口和窗口之间通信

技术杂谈小彩虹2021-08-18 5:49:57140A+A-

今天工作中遇到一个问题,vue2.x架构下,在A页面中window.open一个新窗口B,然后新窗口然后在B窗口里触发A窗口事件。

想了下决定用portMessage来实现

下面上代码

A窗口

methods:{
 AbuttonEvent(){
      window.open(href, "_blank");
  }
}

在A页面里,通过按钮事件AbuttonEvent触发,来新打开一个窗口。

B窗口

methods:{
 BbuttonEvent(){
    let href = window.location.origin;
    window.opener.postMessage("message", href);
  }
}

在B页面里,通过一个按钮事件BbuttonEvent触发,来向A窗口发送消息

在项目的main.js里加入代码

Vue.prototype.$bus = new Vue();
window.addEventListener("message", (e) => {
 console.log(e, "sssssssssssssssssssssss");
  Vue.prototype.$bus.$emit('getTable')
});

剩下来的就是在A窗口里接收$bus,然后触发A窗口的事件。

以上是我排除坑的代码,下节我再补充我遇到的坑以及解决办法,有更好方案的大佬欢迎留言。下班。。。。。。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们