浏览器不同标签页间通信
zwight / 知识库 /
点击：3440 / 2019.07.24 10:39
前段时间由于有个项目可能需要两个屏幕的页面能实时通信，考虑到websocket需要服务端支持，存在不稳定性，因此项目中两个屏幕采用同一个主机控制，两个屏幕打开的页面属于同一个项目，只是通过两个标签页打开，所以探讨了不同浏览器标签页或者窗口发送数据的不同方法。
BroadCastChannel API
目前web api中有一个新的api为BroadCastChannel API，该API从Chrome54和其他几个浏览器的最新版本开始提供，其作用是允许来自同源的不同浏览器上下文（即窗口，标签等）之间的简单的通信，以下是使用该API的实例：
let channel = new BroadcastChannel('channel-name');我们使用BroadCastChannel构造函数创建一个新通道，该构造函数接受频道的名称作为参数。频道名称很重要，因为正在侦听相同频道名称的频道间能够相互广播消息。通道可以从不同的标签页、工作程序和其他浏览器上下文中实例化，但只要他们正在侦听相同的通道名称，他们就能够相互通信。
使用频道广播消息，我们将调用postMessage()接收任何类型的参数进行广播消息：
channel.postMessage('some message');
channel.postMessage({key:'value'}); 这将向正在侦听相同频道名称的所有其他频道发送消息，然后频道可以为此事件添加事件处理程序，以获取广播的消息：
channel.onmessage = function(e){
const message = e.data;
} 我们还可以通过关闭它来使通道停止接收消息：
channel.close();
理想情况下，BroadCastChannel API是实现跨标签页进行通信时的方法，它不仅可以跨标签页广播数据，还可以在其他浏览环境中广播数据，还包括iframe等。但是这个API相对较新，只有一些较新版本的主流浏览器能支持，因此使用时需注意版本的兼容问题。
SharedWorker API
Local Storage