前端面试题(13)—— 如何实现浏览器内多个标签页之间的通信


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

  1. 使用Websocket,通信页的标签连接同一个服务器,发送消息到服务器后,服务器推送消息给所有连接的客户端;
  2. 可以调用localStorage,localStorage在另一个浏览上下文里被添加、修改、删除时,会触发一个storage事件,我们可以通过监听storage事件,控制它的值来进行页面信息通信;
  3. 如果我们能够获得对应标签页的引用,通过postMessage方法也可以实现多个标签页通信。