使用 JavaScript 在选项卡之间发送数据

您是否知道可以使用 JavaScript 在打开的浏览器选项卡之间发送信息？

假设您的用户正在使用多个选项卡查看您的网站，并且一个选项卡上发生了某些事情，而您希望在其他选项卡上对此做出反应 - 您可以使用广播频道 API来实现。

在我们开始之前，我想提一下，这只在同源的浏览上下文之间有效。

浏览器支持

使用此 API 之前，请先检查浏览器支持情况。截至 2020 年 7 月，Safari 似乎尚未支持此 API。请参阅此处的“我可以使用吗...”链接。

发送数据

要将内容发送到另一个选项卡，我们首先需要创建一个新BroadcastChannel实例。这非常简单，如下所示：

    const channel = new BroadcastChannel("my-channel");

注意我们传入的参数my-channel——这是我们订阅的频道的名称。订阅频道后，你就可以从该频道发送和接收消息了。

说到发布消息，我们现在就开始吧：

    channel.postMessage("Hey, how's it going mate? I'm from a different tab!");

我们可以使用该方法发送多种不同类型的对象postMessage，例如：

    // array
    channel.postMessage([5, 10, 15, 20]);

    // object
    channel.postMessage({ name: "Dom", age: 30 });

    // blob
    channel.postMessage(new Blob(["sample text"], {
        type: "text/plain"
    }));

接收消息

现在，我们可以在第二个选项卡上监听并接收这些消息。打开一个新选项卡（同源，即localhost），并添加以下代码：

    // subscribe to the same channel, "my-channel"
    const channel = new BroadcastChannel("my-channel");

    channel.addEventListener("message", e => {
        console.log(e.data);
    });

包含此代码后，打开两个选项卡，然后刷新原始选项卡（执行发布的选项卡），您应该会看到数据出现在控制台中。

就是这么简单！你只需监听message事件，然后通过属性访问数据即可data。

视频教程

如果您更喜欢上述教程的视频版本，您可以在我的 YouTube 频道dcode上观看：

立即报名👉 JavaScript DOM 速成课程

如果您正在学习 Web 开发，您可以在以下链接中找到有关 JavaScript DOM 的完整课程 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1