浏览器标签页之间的通信

我最近遇到了一个问题，需要在同一个 Web 应用程序的不同标签页之间共享一些数据。我使用 OAuth 检索外部提供商的 API 密钥，保存并最终将其显示在平台上。第一个解决方案意味着重新加载整个页面。但这会严重影响用户体验。在 Vue 的 SPA 应用中，想象一下，你从 /process/emailing/... 页面重定向到 /process 😕

在寻找更合适的解决方案时，我遇到了广播频道 API。

它允许同源的不同文档（在不同的窗口、标签页、框架或 iframe 中）之间进行通信。消息通过所有监听该通道的 BroadcastChannel 对象触发的 message 事件进行广播。

让我们首先创建一个广播频道：

const channel = new BroadcastChannel('oauth')

这里我们指定了名称oauth，稍后将在应用程序的其他部分使用它来监听通过该通道发送的任何消息。

channel.postMessage(data)

这里我们发送了一条消息，可以传递任何我们想要的对象。在我们的例子中，我们只需要一个指示来告知某项任务已完成，所以内容并不重要，您可以根据需要随意传递有用的数据。

发送的数据可以是以下任何受支持的值：

• 所有原始类型，不包括符号
• 数组
• 对象字面量
• 字符串、日期、正则表达式对象
• Blob、File、FileList 对象
• ArrayBuffer、ArrayBufferView 对象
• FormData 对象
• ImageData 对象
• 映射和设置对象

现在我们需要在应用的其他部分监听同一个频道。为此，我们创建一个同名的频道，并使用onmessage事件处理程序

const channel = new BroadcastChannel('oauth')
channel.onmessage = (e) => {
  // Business logic here
  // data sent through the channel is available at e.data
}

就这样！我们成功将数据从一个窗口、标签页或框架发送到另一个窗口、标签页或框架了 😀。

最后，要使频道停止接收消息，您可以使用以下方法关闭它：

channel.close()

您可以使用 SharedWorker API 甚至本地存储来实现相同的效果，但我个人认为这种方法最直观。您知道还有其他选择吗？