跨标签页通信小把戏，你值得拥有！

2023-06-04 22:01:35

跨标签页通信：解锁高效网页的协同工作

在当今快节奏的工作环境中，高效至关重要，而跨标签页通信可以让你充分利用浏览器的多标签功能，提升你的工作效率。本文将深入探讨实现跨标签页通信的妙招，为你提供全面的指南。

1. LocalStorage 和 SessionStorage

LocalStorage 和 SessionStorage 是实现跨标签页通信的两种本地存储机制。LocalStorage 持久化存储数据，即使关闭浏览器，数据也不会丢失。SessionStorage 则会在浏览器会话结束时清除数据。通过监听这些存储机制的 storage 事件，其他标签页可以接收数据更新。

// LocalStorage示例
localStorage.setItem('message', 'Hello from Tab 1');
window.addEventListener('storage', (e) => {
  if (e.key === 'message') {
    console.log(`Message received: ${e.newValue}`);
  }
});

// SessionStorage示例
sessionStorage.setItem('sessionMessage', 'Hello from Tab 2');
window.addEventListener('storage', (e) => {
  if (e.key === 'sessionMessage') {
    console.log(`Session message received: ${e.newValue}`);
  }
});

2. window.postMessage() 方法

window.postMessage() 方法允许你在标签页之间发送消息。发送消息的标签页使用 origin 参数指定目标标签页。目标标签页可以通过监听 message 事件接收消息。

// 发送消息的标签页
window.postMessage('Hello from Tab 3', 'https://example.com');

// 接收消息的标签页
window.addEventListener('message', (e) => {
  if (e.origin === 'https://example.com') {
    console.log(`Message received: ${e.data}`);
  }
});

3. iframe 标签

iframe 标签允许你在一个标签页中嵌入另一个标签页。更新 iframe 的 src 属性时，嵌入的标签页会重新加载。你可以利用此机制实现跨标签页通信。

<!-- 发送消息的标签页 -->
<iframe id="iframe" src="https://example.com/send-message"></iframe>

// 接收消息的标签页
<script>
  const iframe = document.getElementById('iframe');
  iframe.addEventListener('load', () => {
    // 消息已发送，更新 iframe 的 src 属性
    iframe.src = 'https://example.com/receive-message';
  });
</script>