利用BroadcastChannel API实现在同源策略下的跨标签页通信

最新推荐文章于 2024-08-16 11:45:21 发布

一天只码五十行

最新推荐文章于 2024-08-16 11:45:21 发布

阅读量344

点赞数 6

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45820271/article/details/137553731

版权

一、BroadcastChannel简介

BroadcastChannel API是现代浏览器支持的一种HTML5 Web通信技术，允许在同源策略下的不同浏览上下文（包括但不限于标签页、窗口、iframe）之间进行双向通信。

每一个BroadcastChannel实例代表了一个通信通道，通过指定唯一的频道名称，不同上下文中的同名BroadcastChannel就能建立连接。

二、基本使用

页面pageOne中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page 1</title>
  </head>
  <body>
    <button id="send-button">发送信息</button>

    <script>
      document
        .getElementById("send-button")
        .addEventListener("click", function () {
          // 创建 BroadcastChannel 对象
          const channel = new BroadcastChannel("shared-channel");

          // 当点击按钮时，向频道发送一条消息
          channel.postMessage({
            sender: "PageOne",
            message: "页面一发来信息",
          });

          // 可选：发送完消息后关闭频道连接
          channel.close();
        });
    </script>
  </body>
</html>

页面pageTwo中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page 2</title>
  </head>
  <body>
    <h2>接收信息:</h2>
    <ul id="messages"></ul>

    <script>
      // 创建 BroadcastChannel 对象
      const channel = new BroadcastChannel("shared-channel");

      // 监听频道中的消息
      channel.addEventListener("message", function (event) {
        const message = event.data;

        // 只显示来自 Page 1 的消息（当然在实际场景中可以调整此逻辑）
        if (message.sender === "PageOne") {
          const li = document.createElement("li");
          li.textContent = `${message.sender}: ${message.message}`;
          document.getElementById("messages").appendChild(li);
        }
      });

      // 可选：当页面卸载时，关闭频道连接
      window.addEventListener("beforeunload", () => {
        channel.close();
      });
    </script>
  </body>
</html>