前端通信按页面来源分为同源和非同源。比较常见的方式是window.postMessage可以支持任何页面之间通信。对于同源页面间Broadcast Channel也是一个不错的选择，支持创建信道后群发消息，使用更加简洁。
Broadcast Channel
Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。
基于发布订阅模式，允许一个窗口发送消息，其他窗口订阅获取消息。
【创建or加入频道】 客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。
// 连接到广播频道
var bc = new BroadcastChannel("test_channel");
//获取信道名称
bc.name
需要在不同页面中使用相同的频道名称初始化一个频道对象,用以表示使用同一个信道。
【发送消息】
postMessage(params)提供发送消息能力，参数可以是任意对象
//使用上边创建的bc信道广播消息
bc.postMessage("This is a test message.");
【接收消息】
当消息被发送之后，所有连接到该频道的 BroadcastChannel 对象上都会触发 message 事件。该事件没有默认的行为，但是可以使用 onmessage 事件处理程序来定义一个函数来处理消息。
//接收bc信道上的消息
bc.onmessage = function (e) {
console.log(e);
};
e.data 发送的数据
e.origin 发送者来源标识
e.source 消息事件源
e.ports
//对于错误也可以绑定回调
bc.onmessageerror = function(e) {
console.warn('error:', e);
};
【与频道断开连接】
通过调用 BroadcastChannel 对象的 close() 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。
// 断开频道连接
bc.close();
遵循同源策略，也就是只有在同一个协议、主机、端口下的窗口才可以正常通信。
浏览器支持
总结
优点：
- 实时传输，速度快且稳定
缺点：
- 只支持同源页面间，不同源页面不能使用
- 不支持IE
