BroadcastChannel API可在同源多页面间实时同步配置，需同源、同频道名，支持现代浏览器；发送轻量JSON数据，监听message事件响应，卸载时调用close()清理。
可以通过 BroadcastChannel API 在同源的多个浏览器窗口、标签页或 iframe 之间实时同步全局配置变更，无需后端介入，轻量且原生支持。
确保同源与兼容性
BroadcastChannel 要求所有通信页面必须同源（协议、域名、端口完全一致）。主流现代浏览器均支持（Chrome 54+、Firefox 38+、Edge 79+、Safari 15.4+），但 Safari 对多标签页的支持在早期版本中存在限制，建议检测可用性：
if (typeof BroadcastChannel === 'undefined') {
console.warn('BroadcastChannel not supported');
}
创建并复用同一频道名
所有需要接收配置更新的页面，必须使用**完全相同的频道名称**（如 'app-config'）创建通道。频道名区分大小写，且不能包含空格或控制字符：
- 推荐使用语义化、固定字符串，避免动态拼接
- 每个页面只需一个
BroadcastChannel实例，可挂载到全局（如window.__configChannel）便于复用和清理 - 示例：
const channel = new BroadcastChannel('app-config');
发送配置变更事件
当配置更新时（例如用户修改主题、语言或API地址），调用 channel.postMessage() 发送结构化数据。强烈建议只传轻量 JSON 数据，避免传函数、DOM 节点或循环引用对象：
立即学习“前端免费学习笔记（深入）”；
- 发送前校验数据可序列化：
JSON.stringify(config)不报错再发 - 推荐格式：
{ type: 'CONFIG_UPDATE', payload: { theme: 'dark', lang: 'zh-CN' } } - 发送示例：
channel.postMessage({ type: 'CONFIG_UPDATE', payload: updatedConfig });
监听并响应广播消息
各页面需监听 message 事件，并安全解析与应用变更：
- 检查
event.data.type类型，避免误处理其他广播（如第三方库也用了同名频道） - 深合并或替换本地配置缓存（如
localStorage或全局对象），并触发 UI 更新（如重设 class、刷新 i18n） - 务必调用
channel.close()在页面卸载时清理资源（如在beforeunload中） - 示例监听逻辑：
const channel = new BroadcastChannel('app-config');
channel.addEventListener('message', event => {
if (event.data?.type === 'CONFIG_UPDATE') {
applyConfig(event.data.payload); // 自定义更新逻辑
}
});
window.addEventListener('beforeunload', () => channel.close());
补充说明与注意事项
不保证送达顺序或可靠性：BroadcastChannel 是“尽力而为”的广播机制，不提供确认、重试或离线缓存。关键配置变更建议仍以服务端为准，前端广播仅用于快速 UI 同步；无法跨域或跨协议通信；iframe 可参与通信，只要其 src 与父页同源；测试时注意隐身窗口会创建独立上下文，频道不互通。
