实现浏览器中多个标签页之间的通信第一种方式：websocket协议。1、首先我们要了解什么是websocket？是一种网络通信协议2.为什么要用websocket？因为http存在缺陷，通信只能由客户端发起，服务端不能主动向客户端发送消息。但是如果此时，服务器有不断变化的状态，那么就只能轮询访问了。轮询：每隔一段时间，发送一个查询。因为websocket具有全双工（full-duplex）通信，自然可以实现多个tab之间的通信。第二种方式：localstoragelocalstorage是浏览器多个标签页共享的存储空间，所以可以利用它来实现多个标签页之间的通信。这里还要补充一点：session是会话级的存储空间，每个tab页单独使用：直接在window对象上添加监听，如下示例：tab页1：选项卡2：storage事件只有在非当前页面修改localStorage时才会触发，当前页面修改localStorage不会触发监听函数。第三种方式：SharedWorker，html5浏览器的新特性。关于SharedWorker普通的webworker可以直接使用newWorker()创建。这种webworker是当前页面独有的。然后是共享工作者（SharedWorker），可以在多个tabs和iframe中使用。SharedWorker可以被多个窗口使用，但是必须保证这些选项卡是同源的（相同的协议、主机和端口号）。要使用它，首先创建一个js文件worker.js。具体代码如下：//使用SharedWorker你接收到的js文件不需要打包到项目中，直接放到服务端即可letdata=''onconnect=function(e){letport=e.ports[0]port.onmessage=function(e){if(e.data==='get'){port.postMessage(data)}else{data=e.data}}}webworker端的代码（暂且这样称呼）同上，注册一个onmessage事件监听信息，客户端（即使用sharedWorker的tab）发送消息时会触发。注意事项1.webworker不能在本地使用，由于浏览器本身的安全机制，所以我这次的例子也是放在服务器上，worker。js和index.html在同一个目录下。2、因为客户端和webworker之间的通信不像websocket那样是全双工的，客户端发送数据和接收数据分两步处理。例子中会有两个按钮，分别对应向sharedWorker发送数据的请求和获取数据的请求，但它们本质上是同一个事件——发送消息。3.webworker端进行判断。当传输的数据为'get'时，它会将变量数据的值返回给客户端。在其他情况下，客户端传递的数据将存储在数据变量中。以下是客户端的代码：//这段代码是必须的，打开页面后注册SharedWorker//显示指定的worker.port.start()方法与worker建立连接if(typeofWorker==="undefined"){alert('当前浏览器不支持webworker')}else{letworker=newSharedWorker('worker.js')worker.port.addEventListener('message',(e)=>{console.log('fromworkerData:',e.data)},false)worker.port.start()window.worker=worker}//获取和发送消息都调用了postMessage方法。我在这里约定的是通过'get'来获取数据。window.worker.port.postMessage('get')window.worker.port.postMessage('发送信息给worker')webSocket如何兼容低端浏览器？1.AdobeFlashSocket2.ActiveXHTMLFile(IE)3.基于多部分编码发送XHR4。参考上面内容的链接XHRbasedonlongpolling-multipletagstoreachcommunication一个有趣的websocket原理讲解
