如何实现两个标签页之间的通信

两个标签页之间可以通过以下几种方式实现通信：

1. Local Storage:

   • 使用 localStorage 进行跨标签页通信。可以在一个标签页中写入数据，另一个标签页可以侦听 storage 事件，获取更新。
   • 示例：

     // 在第一个标签页中设置
     localStorage.setItem('key', 'value');
     
     // 在第二个标签页中监听
     window.addEventListener('storage', (event) => {
         if (event.key === 'key') {
             console.log(event.newValue); // 获取更新后的值
         }
     });
     

2. Broadcast Channel API:

   • 使用 BroadcastChannel API 创建一个通信频道，任何在同一个频道上发送消息的标签页都可以接收到消息。
   • 示例：

     const channel = new BroadcastChannel('channel_name');
     
     // 发送消息
     channel.postMessage('Hello from tab 1');
     
     // 接收消息
     channel.onmessage = (event) => {
         console.log(event.data); // 输出接收到的消息
     };
     

3. WebSockets:

   • 如果需要更复杂的实时通信，使用 WebSocket 可以让不同标签页之间通过服务器进行双向通讯。所有打开的标签页都可以连接到同一个 WebSocket 服务器，从而实现通信。

4. Service Workers:

   • 在一些复杂的应用中，可以使用 Service Worker 作为中介来实现标签页间的通信，但这通常要配置得比较复杂，适合需要离线支持或推送通知的场景。

if (navigator.serviceWorker.controller) {  
    navigator.serviceWorker.controller.postMessage('Hello from page!');  
}

self.addEventListener('message', (event) => {  
    console.log('Received message in Service Worker:', event.data);  
    // 可以在这里处理逻辑，甚至把消息返回给发送者  
    event.ports[0].postMessage('Response from Service Worker');  
});

5. PostMessage:
   • 如果是多个窗口或 iframe 中的标签页，可以使用 postMessage 方法进行跨源通信。

   // 在发消息的标签页/窗口中  
const otherWindow = window.open('http://example.com'); // 打开目标窗口  
otherWindow.postMessage('Hello from this window!', 'http://example.com');

// 在接收消息的标签页/窗口中  
window.addEventListener('message', (event) => {  
    if (event.origin === 'http://example.com') { // 验证来源  
        console.log('Received:', event.data);  
    }  
});

原文地址：https://blog.csdn.net/vh_127/article/details/142715743

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！