BroadcastChannel 浏览器跨窗口通讯封装

// 创建Channel.ts文件
export default class Channel {
  channel: BroadcastChannel
  constructor(name: string) {
    this.channel = new BroadcastChannel(name)
  }
  sendMessage(message: string | Object) {
    this.channel.postMessage(message)
  }
  onMessage(callback?: Function) {
    this.channel.addEventListener('message', (event) => {
      // 处理接收到的消息
      if (callback) {
        callback(event.data)
      } else {
        return event.data
      }
    })
  }
  close() {
    this.channel.close()
  }
}

使用 

import Channel from '@/components/Channel.ts'

const cal = new Channel('myChannel2')
cal.sendMessage({ name: '张三', age: 18 })

cal.onMessage((val) => {
  console.log(val);
})
// or
const message = cal.onMessage()
console.log(message);