BroadcastChannel

概述

JS中多页面通信有多种方式：BroadCast Channel，Service Worker（只能在https环境下使用），LocalStorage

BroadCast Channel

多个页面订阅同一个频道cc，通过 postMessage 发送消息，其他所有监听的频道都可以收到消息。下面是初始化频道并发送消息

function initChannel(){
  const channel = new BroadcastChannel('cc');
  const channelBtn = document.querySelector('#channelBtn');

  channelBtn.addEventListener('click', () => {
    channel.postMessage(new Date());
  });
}

initChannel();// 初始化广播频道

下面是监听消息

initChannel();// 初始化广播频道

function initChannel(){
  const channel = new BroadcastChannel('cc');

  channel.addEventListener('message', (event) => {
      console.log(event.data);
  });
}