问题

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