需求:A页面上点击编辑,是跳转到一个新的B页面,这个B页面编辑之后,A页面要自动刷新,在不使用仓库的情况如何实现的呢?
实现思路:使用BroadcastChannel来实现浏览器跨页面通信,B页面编辑保存发起通信,A页面监听通信来调用刷新的方法
实现方法:
1、新建一个文件夹crossMsg.js
const channel = new BroadcastChannel('channel') //使用构造函数创建一个实例
export function sendMsg(type) { // 发起通信
channel.postMessage(type)
}
export function listenMsg(callback) { // 监听通信
channel.addEventListener('message', (e) => {
callback && callback(e.data)
})
}
2、A页面调用监听通讯的方法
import { listenMsg } from './crossMsg'
listenMsg((type) => {
console.log(type) // 'update'
})
3、B页面调用发送通讯的方法
import { sendMsg } from "./crossMsg";
sendMsg('update')
补充:
BroadcastChannel 接口代理了一个命名频道,可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件,消息可以广播到所有监听了该频道的BroadcastChannel 对象。
构造函数:BroadcastChannel 创建一个链接到命名频道的对象。
属性:该接口会从它的父级 browsing context 继承属性。
BroadcastChannel.name 频道名称
方法:
BroadcastChannel.postMessage()
向所有监听了相同频道的 BroadcastChannel 对象发送一条消息,消息内容可以是任意类型的数据。
BroadcastChannel.close()
关闭频道对象,告诉它不要再接收新的消息,并允许它最终被垃圾回收。
事件:
message
当频道收到一条消息时触发。 也可以使用 onmessage 属性访问。
messageerror
当频道收到一条无法反序列化的消息时触发。 也可以使用 onmessageerror 属性访问。
事件处理程序
BroadcastChannel.onmessage
事件处理器,用于定义当该对象上触发了 message 事件时要执行的函数。
BroadcastChannel. onmessageerror
事件处理器,用于定义当该对象上触发了类型为 MessageError 的 MessageEvent 事件时要执行的函数。当接收到一条无法反序列化的消息时会触发此事件。