前端页面通信

  • websocket:
    需要服务端
    配合socket.io/ websocket-node
// 广播: 
server.connections.forEach(()=> sendText )
  • service worker:
    navigator.serviceWorker
    各个页面register同一个worker
listen message => client.matchAll().forEach(()=> postmessage )
  • localStorage
    setItem => listen storage event

  • shared worker
    tab页直接共享、需要自行处理postMessage进行 get/set

  • cookie、redius

  • 跨域
    iframe -> postmessage( 而对于非同源页面,则可以通过嵌入同源 iframe 作为“桥”,将非同源页面通信转换为同源页面通信。)

参考:

  • 广播模式:Broadcast Channel / Service Worker / LocalStorage + StorageEvent

  • 共享存储模式:Shared Worker / IndexedDB / cookie

  • 口口相传模式:window.open + window.opener

  • 基于服务端:Websocket / Comet / SSE 等

https://www.jianshu.com/p/bda0b7ead248

你可能感兴趣的:(前端页面通信)