如何实现浏览器内多个标签页之间的通信？

1.Broadcast Channel:

顾名思义，“广播频道”，官方文档里的解释为“用于同源不同页面之间完成通信的功能”，在其中某个页面发送的消息会被其他页面监听到。

注意“同源”二字，该方法无法完成跨域的数据传输。

2.localStorage:

localStorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps:session是会话级的存储空间，每个标签页都是单独的)。

3.SharedWorker:

SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

4.WebSocket通讯:

全双工(full-duplex)通信自然可以实现多个标签之间的通信

5.定时器setlnterval+cookie:

  1)在页面A设置一个使用setlnterval定时器不断刷新，检查Cookies的值是否发生变化，如果变化就进行刷新的操作。

  2)由于Cookies是在同域可读的，所以在页面B审核的时候改变Cookies的值，页面A自然是可以拿到的。

这样做确实可以实现功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来

但是这种实现方案，确实不够优雅。

6.postMessage:

两个需要交互的tab页面具有依赖关系。

如 A页面中通过JavaScript的windowopen打开B页面，或者B页面通过iframe嵌入至A页面，此种情形最简单，可以通过 HTML5的window.postMessage API完成通信，由于postMessaae函数是绑定在window全局对象下，因此通信的页面中必须有一个页面(如A页面)可以获取另一个页面(如B页面)的window对象，这样才可以完成单向通信;B页面无需获取A页面的window对象，如果需要B页面对页面的通信，只需要在B页面侦听message事件，获取事件中传递的source对象，该对象即为A页面window对象的引用:

//B页面

window.addEventListner(＇message＇,(e)=>{

let {data,source,origin}=e;

source.postMessage('message echo' '/');

});

postMessage的第一个参数为消息实体，它是一个结构化对象，即可以通过“JSON.stringify和JSON.parse”函数还原的对象;第二个参数为消息发送范围选择器，设置为“/”意味着只发送消息给同源的页面，设置为“*”则发送全部页面。