一、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>
