浏览器打开多标签页时,通过BroadcastChannel广播频道方法通信

需求:因为项目没有使用单页面路由跳转,新增编辑均是打开新标签页,当打开了多个标签页的时候,其中某一个标签页关闭时,想通知主页面刷新接口,获取最新的分页列表数据.

实现代码:

1.新增,编辑页面:

// 创建一个名为 "my_channel" 的广播频道
const myChannel = new BroadcastChannel("my_channel");
// 向该频道发送消息
myChannel.postMessage("refreshList");

// 关闭当前页
window.close();  

2.主页面

let _this = this;  
// 监听名为 "my_channel" 的广播频道
const myChannel = new BroadcastChannel("my_channel");
// 监听该频道并处理消息
myChannel.onmessage = function (event) {
if (event.data === "refreshList") {
_this.getList();   //刷新列表方法
}
};

以上内容均借鉴BroadcastChannel() - Web API | MDN