SharedWorker实现浏览器内多个标签页（.html页面）之间的通信、port、ports、postMessage、onmessage、start、addEventListener

1、步骤

第一步，新建一个文件夹sharedWorker。 第二步，在sharedWorker文件夹里面创建三个同级文件，分别是：worker.js/send.html/reception.html。

2、worder.js文件代码

// 在所有sharedWorker共享的worker.js中， // 保存一个data变量， // 用于存储多个worker共享的数据 let data = "连接成功"; // 必须提供一个名为onconnect的事件处理函数 // 每当一个页面中new SharedWorker("worker.js")时， // 就会为新创建的worker绑定onconnect事件处理函数 onconnect = function(e) { // 获得当前连接上来的客户端对象 let client = e.ports[0]; client.postMessage(data); // 当当前对象收到消息时 client.onmessage = function(e) { // 如果消息内容为空， // 说明该客户端想获取共享的数据data if (e.data === "") { // 就给当前客户端发送data数据 client.postMessage(data); } else { // 否则如果消息内容不为空， // 说明该客户端想要提供 // 新的消息保存在共享的data中， // 供别人获取 data = e.data; } }; }; 

3、send.html文件代码

<input type="text" id="msg" /> <button id="send">发送 if (msg.value.trim() !== "") { worker.port.postMessage(msg.value.trim()); }; }; 

4、reception.html文件代码

<div> <span>收到消息： recMsg.innerHTML = e.data; }); worker.port.start(); // 1. 接收端反复向共享的worker.js对象中发送空消息， // 意为想获取data的值 setInterval(function () { worker.port.postMessage(""); // 2. 只要发送消息， // 就触发worker.js中的onmessage， // onmessage判断是空消息内容， // 说明客户端想获得data。 // 于是就用postMessage()方法， // 将data返回给当前客户端 }, 500); 

5、完整代码

gitee(码云) - mj01分支 - SharedWorker 文件夹