Skip to content

浏览器窗口间通信

概念

浏览器多个标签页窗口间通信,主要指的是同源的多个页面间的通信,主要方法又本地存储通信、Web Worker 通信、Web Socket 通信

本地存储通信

通过浏览器对应同源页面本地存储是共享的策略实现通信,主要可以使用localStoragecookieindexedDB,对于

对于 sessionStroage 是在同一会话有效的,在 MDN 中提到,通过点击链接或者使用 window.open 打开的新标签页之间是属于同一个 session 的,新的标签页会继承上一级会话的 sessionStroage,但新开一个标签页总是会初始化一个新的 session,即使是同源的,它们也不属于同一个 session。

Web Worker

HTML5 中的 Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker

Dedicated Worker 直接使用 new Worker()即可创建,这种 webworker当前页面专有的

Shared Worker 可以被多个 window、标签页、iframe 共同使用,但必须保证这些标签页都是同源的。

websocket

使用 WebSocket 将服务器作为数据中转站进行数据传输,可以实现浏览器窗口间通信,但是比较耗费服务器资源。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道,两者之间就直接可以数据互相传送。

参考

https://github.com/WindrunnerMax/EveryDay/blob/master/Browser/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E9%97%B4%E9%80%9A%E4%BF%A1.md