相关资料:
1、 使用WebSocket,通信的标签页连接同一个服务器,发送消息到服务器后,服务器推送消 息给所有连接的客户端。
2、 使用SharedWorker (只在chrome浏览器实现了),两个页面共享同一个线程,通过向 线程发送数据和接收数据来实现标签页之间的双向通行。
3、 可以调用localStorage、cookies等本地存储方式,localStorge另一个浏览上下文里 被添加、修改或删除时,它都会触发一个storage事件,我们通过监听storage事件,控制 它的值来进行页面信息通信;
4、 如果我们能够获得对应标签页的引用,通过postMessage方法也是可以实现多个标签页 通信的。
实现多个标签页之间的通信,本质上都是通过中介者模式来实现的。因为标签页之间没有办法 直接通信,因此我们可以找一个中介者,让标签页和中介者进行通信,然后让这个中介者来进 行消息的转发。
第一种实现的方式是使用websocket协议,因为websocket协议可以实现服务器推送,所以 服务器就可以用来当做这个中介者。标签页通过向服务器发送数据,然后由服务器向其他标签 页推送转发。
第二种是使用ShareWorker的方式,shareWorker会在页面存在的生命周期内创建一个唯一 的线程,并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角 色。标签页间通过共享一个线程,然后通过这个共享的线程来实现数据的交换。
第三种方式是使用localstorage的方式,我们可以在一个标签页对localStorage的变化事 件进行监听,然后当另一个标签页修改数据的时候,我们就可以通过这个监听事件来获取到数 据。这个时候localStorage对象就是充当的中介者的角色。
还有一种方式是使用postMessage方法,如果我们能够获得对应标签页的引用,我们就可以 使用postMessage方法,进行通信。

Was this helpful?

0 / 0

发表回复 0

Your email address will not be published.