浏览器两个 tab 都是同域，如何在一个tab 向另一个 tab 发消息

最新推荐文章于 2025-08-22 19:33:51 发布

半糖1122

最新推荐文章于 2025-08-22 19:33:51 发布

阅读量166

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/tzz_1122/article/details/147976616

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 通过 `window.postMessage`（需窗口引用）

如果两个 Tab 存在引用关系（如通过 window.open 打开），可直接通过 postMessage 通信。

// Tab A 打开 Tab B 并发送消息
const newTab = window.open('https://same-domain.com/tabB');
newTab.postMessage('Hello Tab B!', 'https://same-domain.com');

// Tab B 接收消息
window.addEventListener('message', (e) => {
  if (e.origin === 'https://same-domain.com') {
    console.log('Received:', e.data);
  }
});

特点：