BroadcastChannel跨页面通信
在现代 Web 应用程序中，有时候我们需要在不同的页面之间进行通信，例如在一个页面上的操作需要更新另一个页面上的内容。这时候，BroadcastChannel 可以成为一个非常有用的工具。BroadcastChannel 允许我们在不同的浏览器标签页或者不同的窗口之间进行消息广播。
# 什么是 BroadcastChannel？
BroadcastChannel 是一个 JavaScript API，它提供了一种简单的跨页面通信机制。通过 BroadcastChannel，我们可以创建一个频道，不同页面或者同一页面中的不同 JavaScript 上下文可以通过这个频道进行消息的发送和接收。
# 如何使用 BroadcastChannel？
使用 BroadcastChannel 很简单，首先我们需要创建一个频道：
const channel = new BroadcastChannel('myChannel');
1
上面的代码创建了一个名为 'myChannel' 的频道。接下来，我们可以通过这个频道发送消息：
channel.postMessage('Hello, world!');
1
要在其他页面或者同一页面的不同上下文中接收消息，我们可以监听 message 事件：
channel.onmessage = (event) => {
console.log('Received message:', event.data);
};
1
2
3
2
3
# 示例
假设我们有两个页面，一个发送消息，一个接收消息。
发送消息的页面 (page1.html)
<!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 onclick="sendMessage()">Send Message</button>
<script>
const channel = new BroadcastChannel('myChannel');
function sendMessage() {
channel.postMessage('Hello from Page 1!');
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
接收消息的页面 (page2.html)
<!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>
<div id="message"></div>
<script>
const channel = new BroadcastChannel('myChannel');
channel.onmessage = (event) => {
document.getElementById('message').textContent = event.data;
};
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 注意事项
- BroadcastChannel 仅在同源页面之间有效。这意味着，只有当两个页面具有相同的协议 (http 或 https)，主机 (localhost:8080 和 localhost:8081 是不同的主机)，以及端口号时，它们才能够相互通信。
- 虽然 BroadcastChannel 是一个强大的工具，但在使用时需要注意不要滥用，以免出现安全或性能问题。
上次更新: 2024/09/25, 16:09:05