前端面试题：浏览器两个 tab 都是同域，如何在一个tab 向另一个 tab 发消息

文章预览

作者：从谷底向上 https://juejin.cn/post/7474962750701322277 在浏览器中，两个同域的标签页（Tab）之间通信有多种实现方式，以下是常见的几种方法及其原理和代码示例： 1.  使用  localStorage  事件 当修改  localStorage  时，会触发  storage  事件，其他同源页面可以监听该事件实现通信。 // Tab A 发送消息 localStorage.setItem( 'message' ,  JSON .stringify({  content :  'Hello Tab B!'  })); // Tab B 接收消息 window .addEventListener( 'storage' , (e) => {    if  (e.key ===  'message' ) {      const  message =  JSON .parse(e.newValue);      console .log( 'Received:' , message);   } }); 特点 ： 只能传递字符串，需手动序列化/反序列化。 当前 Tab 修改数据时不会触发自己的监听器 ，只有其他 Tab 会收到事件。 受同源策略限制，仅限同域页面。 2.  BroadcastChannel API 现代浏览器提供的专用通信 API，允许同源页面通 ………………………………