js 跨浏览器tab页通信

Posted 2023-01-14 wangjun5159

问题

今天遇到一个问题，在商品列表页面，打开一个新增商品的页面，新增完后，商品列表要立刻显示新增商品，这就需要新增商品后，通知订单列表页，也就是常说的跨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
 
);