js 跨浏览器tab页通信

跨页面通信技术：BroadcastChannel与window.postMessage解析

原创已于 2023-08-06 08:15:10 修改 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2021-02-23 19:21:06 首次发布

本文介绍了在商品列表页面中实现新增商品后立即更新列表的跨页面通信问题。主要探讨了三种解决方案：使用BroadcastChannel、window.postMessage以及storageEvent。BroadcastChannel简单易用，能传递任意数据；window.postMessage需要目标窗口引用，支持跨域；storageEvent通过监听localStorage变更实现通信，但仅限字符串。每种方法都有其适用场景和限制。

问题

今天遇到一个问题，在商品列表页面，打开一个新增商品的页面，新增完后，商品列表要立刻显示新增商品，这就需要新增商品后，通知订单列表页，也就是常说的跨tab页通信。跨tab页通信，不仅包含常见的跨tab页，还包括跨window窗口、跨frame、跨iframe。

解决方案

同源下，可使用BroadCastChannel实现跨tab页通信。

发送端
- 如果重复创建相同名称的channel，j底层channel只会创建一次。

// If it is the first to connect to that broadcast channel name, 
// the underlying channel is created.
// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
// Example of sending of a very simple message
bc.postMessage('This is a test message.');

接收端

// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
// A handler that only logs the event to the console:
bc.onmessage = function (ev) { console.log(ev); }

关闭

// Disconnect the channel
bc.close();

这种方法比较简单，可以传任何数据对象（字符串、对象、数字等等），也是我比较推荐的方式。

window postMessage 方式

除了使用上述方式，还可以使用window.postMessage，缺点就是要持有目标window的引用，当页面刷新后，会失去目标window引用；优点就是可实现跨域通信。

发送端

//发送事件
targetWindow.postMessage(message, targetOrigin)

接收端

//接收事件
window.addEventListener("message", (event) => {
  if (event.origin !== "http://localhost:8080")
    return;
  // Do something
}, false);

storage event方式

也可以使用storage event来实现，原理就是监听storage set事件，来达到同步，但只能发送字符串，另外当前页面也不会获取本页发出的set事件。

发送端

//发送事件
window.localStorage.setItem("loggedIn", "true");

接收端

//接收事件
window.addEventListener('storage', (event) => {
 if (event.storageArea != localStorage) return;
 if (event.key === 'loggedIn') {
   // Do something with event.newValue
 }
});