浏览器内多个页签如何通信

浏览器内多个页签如何通信

在浏览器中，多个标签页（页签）之间的通信可以通过以下方法实现。这些方法基于同源策略（Same Origin Policy），即通信的页面必须来自相同的协议、域名和端口。

1. 使用 localStorage 和 storage 事件

原理：当 localStorage 或 sessionStorage 中的数据发生变化时，会触发 storage 事件，其他同源页面可以监听此事件来实现通信。

// 发送消息的页面
localStorage.setItem('message', JSON.stringify({ text: 'Hello from Tab 1!' }));

// 接收消息的页面
window.addEventListener('storage', (event) => {
  if (event.key === 'message') {
    const message = JSON.parse(event.newValue);
    console.log('Received:', message.text); // 输出: "Hello from Tab 1!"
  }
});

特点：

• 适用于简单数据传递。

• 仅在同源页面间生效。

• storage 事件不会在修改数据的当前标签页触发。

2. 使用 BroadcastChannel API

原理：通过 BroadcastChannel 创建一个命名频道，多个页面订阅同一频道后，可以通过该频道广播消息。

// 发送消息的页面
const channel = new BroadcastChannel('my-channel');
channel.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的页面
const channel = new BroadcastChannel('my-channel');
channel.onmessage = (event) => {
  console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
};

特点：

• 支持复杂对象传递。

• 仅在同源页面间生效。

• 现代浏览器支持良好（IE 不支持）。

3. 使用 SharedWorker

原理：通过共享的后台线程（SharedWorker）作为中介，多个页面通过该线程传递消息。

// SharedWorker 脚本（shared-worker.js）
self.onconnect = (event) => {
  const port = event.ports[0];
  port.onmessage = (e) => {
    // 收到消息后广播给所有连接的页面
    port.postMessage(e.data);
  };
};

// 发送消息的页面
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的页面
const worker = new SharedWorker('shared-worker.js');
worker.port.onmessage = (event) => {
  console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
};

特点：

• 支持复杂通信场景。

• 需要处理 SharedWorker 的生命周期。

• 兼容性较好（IE 不支持）。

4. 使用 window.postMessage

原理：通过 window.open() 或 window.opener 获取其他页面的引用，直接通过 postMessage 发送消息。

// 打开新页签并发送消息
const newTab = window.open('https://example.com/tab2');
newTab.postMessage({ text: 'Hello from Tab 1!' }, 'https://example.com');

// 接收消息的页面
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
  }
});

特点：

• 需要明确的页面引用（通过 window.open 或 window.opener）。

• 支持跨域通信（需目标页面允许）。

5. 使用 IndexedDB

原理：通过共享的 IndexedDB 数据库作为中介，多个页面监听数据库变化。

// 发送消息的页面
const db = await openDB('my-db', 1);
await db.put('messages', { text: 'Hello from Tab 1!' });

// 接收消息的页面
const db = await openDB('my-db', 1);
db.on('changes', (changes) => {
  changes.forEach((change) => {
    if (change.type === 'put') {
      console.log('Received:', change.value.text); // 输出: "Hello from Tab 1!"
    }
  });
});

特点：

• 适用于需要持久化存储的场景。

• 实现相对复杂。

6. 使用 Service Worker

原理：通过 Service Worker 作为消息中转站，多个页面与 Service Worker 通信。

// Service Worker 脚本（sw.js）
self.addEventListener('message', (event) => {
  event.waitUntil(
    self.clients.matchAll().then((clients) => {
      clients.forEach((client) => {
        client.postMessage(event.data);
      });
    })
  );
});

// 发送消息的页面
navigator.serviceWorker.controller.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的页面
navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
});

特点：

• 支持离线场景。

• 需要 HTTPS 环境（本地开发除外）。

总结

方法	适用场景	兼容性	复杂度
localStorage	简单数据同步	所有现代浏览器	低
BroadcastChannel	实时消息传递	现代浏览器	中
SharedWorker	复杂通信场景	现代浏览器	高
window.postMessage	跨域或父子页面通信	所有浏览器	中
IndexedDB	持久化数据共享	所有现代浏览器	高
Service Worker	离线或后台通信	现代浏览器	高

选择建议：

• 简单场景：优先使用 localStorage 或 BroadcastChannel。

• 复杂场景：选择 SharedWorker 或 Service Worker。

• 跨域通信：使用 window.postMessage（需目标页面配合）。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github