跨页面通信

同源页面间的跨页面通信

BroadCast Channel

// 发送广播
const bc = new BroadcastChannel('flashPage');
    bc.postMessage({
      msg: 'flashPage',
      from: 'index.js',
});


// 监听广播
const bc = new BroadcastChannel('flashPage'); 
bc.onmessage =  (e) => {
  const data = e.data;
  const text = '[receive] ' + data.msg + ' —— tab ' + data.from;
  // console.log('[BroadcastChannel] receive message:', text);
  if(data.msg && data.msg === 'flashPage'){
   // doSomeThing
  }
};

Service Worker

LocalStorage

Shared Worker

IndexedDB

window.open + window.opener

非同源页面之间的通信

iframe

总结

1. 广播模式：Broadcast Channe / Service Worker / LocalStorage + StorageEvent
2. 共享存储模式：Shared Worker / IndexedDB / cookie
3. 口口相传模式：window.open + window.opener
4. 基于服务端：Websocket / Comet / SSE 等