怎样实现两个标签页之间的通讯

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

• Local Storage:
  
  
  
  • 使用 localStorage 举行跨标签页通讯。可以在一个标签页中写入数据，另一个标签页可以侦听 storage 事故，获取更新。
    
  • 示例：
    1. // 在第一个标签页中设置
    2. localStorage.setItem('key', 'value');
    4. // 在第二个标签页中监听
    5. window.addEventListener('storage', (event) => {
    6.     if (event.key === 'key') {
    7.         console.log(event.newValue); // 获取更新后的值
    8.     }
    9. });

    复制代码
  
  
• Broadcast Channel API:
  
  
  
  • 使用 BroadcastChannel API 创建一个通讯频道，任安在同一个频道上发送消息的标签页都可以吸收到消息。
    
  • 示例：
    1. const channel = new BroadcastChannel('channel_name');
    3. // 发送消息
    4. channel.postMessage('Hello from tab 1');
    6. // 接收消息
    7. channel.onmessage = (event) => {
    8.     console.log(event.data); // 输出接收到的消息
    9. };

    复制代码
  
  
• WebSockets:
  
  
  
  • 如果须要更复杂的实时通讯，使用 WebSocket 可以让差别标签页之间通过服务器举行双向通讯。全部打开的标签页都可以毗连到同一个 WebSocket 服务器，从而实现通讯。
    
  
  
• Service Workers:
  
  
  
  • 在一些复杂的应用中，可以使用 Service Worker 作为中介来实现标签页间的通讯，但这通常要设置得比力复杂，恰当须要离线支持或推送关照的场景。
    
  
  

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

复制代码

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

复制代码

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

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

复制代码

1. // 在接收消息的标签页/窗口中  
2. window.addEventListener('message', (event) => {  
3.         console.log('Received:', event.data);  
4.     }  
5. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金