API介绍BroadcastChannel API是 HTML5 提供的一种简单的跨上下文通信机制允许同源下的不同浏览器上下文如标签页、iframe、Worker通过命名频道进行消息广播和接收。核心特性如下同源策略通信仅限于同源页面。基于命名频道通过唯一的频道名称建立连接。广播通信发送的消息会被频道内所有其他参与者接收。简单 API主要包含postMessage(),close()方法和onmessage,onmessageerror事件。自动连接管理当标签页关闭或上下文销毁时连接会自动关闭。基本用法与代码示例创建频道与发送消息// 创建或连接到一个名为 my_app_channel 的频道 const channel new BroadcastChannel(my_app_channel); // 发送消息 channel.postMessage({ type: USER_ACTION, payload: { action: item_added, id: 123 } }); // 发送简单字符串 channel.postMessage(Hello from Tab A!);接收消息// 在另一个标签页或上下文中 const channel new BroadcastChannel(my_app_channel); // 监听消息事件 channel.onmessage (event) { console.log(收到消息:, event.data); // 根据消息类型处理业务逻辑 if (event.data.type USER_ACTION) { updateUI(event.data.payload); } }; // 也可以使用 addEventListener channel.addEventListener(message, (event) { console.log(通过 addEventListener 收到:, event.data); });关闭频道与错误处理// 主动关闭频道连接 channel.close(); // 监听消息错误 channel.onmessageerror (error) { console.error(消息处理出错:, error); };应用场景用户登录状态同步当用户在某个标签页登录或登出时通知所有其他标签页更新界面状态。// 登录成功后广播 function broadcastLogin(user) { const authChannel new BroadcastChannel(auth_channel); authChannel.postMessage({ type: LOGIN, user: user }); authChannel.close(); } // 在所有标签页监听 const authChannel new BroadcastChannel(auth_channel); authChannel.onmessage (event) { if (event.data.type LOGIN) { // 更新本地用户状态显示用户名等 setCurrentUser(event.data.user); } else if (event.data.type LOGOUT) { // 清除本地状态跳转到登录页 clearUserSession(); } };