美文网首页工作生活
前端页面通信

前端页面通信

作者: 一只重拾梦想的小水 | 来源:发表于2019-07-01 14:28 被阅读0次
    • 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

    相关文章

      网友评论

        本文标题:前端页面通信

        本文链接:https://www.haomeiwen.com/subject/rtpgcctx.html