实现多个标签页之间通信的几种方法

忘是亡心i 2021-11-05 05:50 793阅读 0赞

websocket、setInterval+cookie、localstorage、SharedWorker和postMessage

**1.localstorage**

localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

**2.SharedWorker**

SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

**3.websocket通讯**

全双工（full-duplex）通信自然可以实现多个标签之间的通信

**4.定时器setInterval+cookie**

1.在页面A设置一个使用setInterval定时器不断刷新，检查Cookies的值是否发生变化，如果变化就进行刷新的操作。

2.由于Cookies是在同域可读的，所以在页面B审核的时候改变Cookies的值，页面A自然是可以拿到的。

这样做确实可以实现我想要的功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来，但是这种实现方案，确实不够优雅。

**5.postMessage**

两个需要交互的tab页面具有依赖关系。

如 A页面中通过JavaScript的window.open打开B页面，或者B页面通过iframe嵌入至A页面，此种情形最简单，可以通过HTML5的 window.postMessage API完成通信，由于postMessage函数是绑定在 window 全局对象下，因此通信的页面中必须有一个页面（如A页面）可以获取另一个页面（如B页面）的window对象，这样才可以完成单向通信；B页面无需获取A页面的window对象，如果需要B页面对A页面的通信，只需要在B页面侦听message事件，获取事件中传递的source对象，该对象即为A页面window对象的引用：

//B页面
    B页面
    
    window.addEventListner('message',(e)=>{
        let {data,source,origin} = e;
        source.postMessage('message echo','/');
    });

postMessage的第一个参数为消息实体，它是一个结构化对象，即可以通过“JSON.stringify和JSON.parse”函数还原的对象；第二个参数为消息发送范围选择器，设置为“/”意味着只发送消息给同源的页面，设置为“\*”则发送全部页面。

参考文章：  
[https://juejin.im/post/5acdba01f265da23826e5633][https_juejin.im_post_5acdba01f265da23826e5633]  
[https://juejin.im/post/5b0d0a3cf265da092767917f\#heading-0][https_juejin.im_post_5b0d0a3cf265da092767917f_heading-0]  
[https://segmentfault.com/q/1010000006664804][https_segmentfault.com_q_1010000006664804]  
[https://juejin.im/post/59bb7080518825396f4f5177\#heading-0][https_juejin.im_post_59bb7080518825396f4f5177_heading-0]  
[https://segmentfault.com/a/1190000011207317][https_segmentfault.com_a_1190000011207317]  
[https://blog.csdn.net/qq\_34626003/article/details/70231078][https_blog.csdn.net_qq_34626003_article_details_70231078]  
[https://www.cnblogs.com/chengdabelief/p/6686070.html][https_www.cnblogs.com_chengdabelief_p_6686070.html]  
[https://www.cnblogs.com/chengdabelief/p/6685917.html][https_www.cnblogs.com_chengdabelief_p_6685917.html]  
[https://www.jianshu.com/p/31facd4934d7][https_www.jianshu.com_p_31facd4934d7]

[https_juejin.im_post_5acdba01f265da23826e5633]: https://juejin.im/post/5acdba01f265da23826e5633
[https_juejin.im_post_5b0d0a3cf265da092767917f_heading-0]: https://juejin.im/post/5b0d0a3cf265da092767917f#heading-0
[https_segmentfault.com_q_1010000006664804]: https://segmentfault.com/q/1010000006664804
[https_juejin.im_post_59bb7080518825396f4f5177_heading-0]: https://juejin.im/post/59bb7080518825396f4f5177#heading-0
[https_segmentfault.com_a_1190000011207317]: https://segmentfault.com/a/1190000011207317
[https_blog.csdn.net_qq_34626003_article_details_70231078]: https://blog.csdn.net/qq_34626003/article/details/70231078
[https_www.cnblogs.com_chengdabelief_p_6686070.html]: https://www.cnblogs.com/chengdabelief/p/6686070.html
[https_www.cnblogs.com_chengdabelief_p_6685917.html]: https://www.cnblogs.com/chengdabelief/p/6685917.html
[https_www.jianshu.com_p_31facd4934d7]: https://www.jianshu.com/p/31facd4934d7