如何实现浏览器内多个标签页之间的通信?

类别：浏览器 / 日期：2023-02-01 / 浏览：256 / 评论：0

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。 因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。通 信方法如下：

使用 websocket 协议，因为 websocket 协议可以实现服务器推送， 所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数 据，然后由服务器向其他标签页推送转发。

使用 ShareWorker 的方式，shareWorker 会在页面存在的生命周期 内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。 这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个 线程，然后通过这个共享的线程来实现数据的交换。-通信

使用localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就 可以通过这个监听事件来获取到数据。这个时候 localStorage 对象 就是充当的中介者的角色。-通信

使用 postMessage 方法，如果我们能够获得对应标签页的引用，就 可以使用 postMessage 方法，进行通信。