你越是认真生活，你的生活就会越美好！
介绍
BroadcastChannel MDN文档
BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。
它允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信。
通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
使用
初始化
let CHANNEL_CODE = 'test1'
let listenChannel = new BroadcastChannel(CHANNEL_CODE);
监听
listenChannel.onmessage = (res) => {
console.log(res);
};
// 或者
listenChannel.addEventListener('message', (res) => {
console.log(res);
});
发送
new BroadcastChannel(CHANNEL_CODE).postMessage(data);
关闭
var listenChannel = new BroadcastChannel(CHANNEL_CODE);
listenChannel.close();
也可以删除掉监听，回收内存
let CHANNEL_CODE = 'test1'
let listenChannel = new BroadcastChannel(CHANNEL_CODE);
let fn = function(res){
console.log(res);
}
listenChannel.addEventListener('message', fn);
listenChannel.removeEventListener('message', fn);
注意
- 不支持跨域
- 当监听和发送使用同一个 broadcastChannel 实例的时候，发送的消息不能被监听到。
项目中使用
在 a 页面打开一个新窗口 b 页面
// b 页面
// 跟同源下不同窗口通信 让其他页面刷新数据
let CHANNEL_CODE = 'addProject'
let listenChannel = new BroadcastChannel(CHANNEL_CODE);
listenChannel.postMessage({
type: 'addProject',
success: true
});
listenChannel.close();
// a 页面
// 跟同源下不同窗口通信 接收新增项目成功消息
let CHANNEL_CODE = 'addProject'
let listenChannel = new BroadcastChannel(CHANNEL_CODE);
const that = this
listenChannel.onmessage = (res) => {
console.log(res);
if (res.data.success) {
that.$emit('updateProject')
}
listenChannel.close();
};
推荐阅读
Vue源码学习目录
连点成线 - 前端成长之路
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强