关键字：：跨页面通信、广播频道 API 通信、SharedWorker
有几种方法可以在浏览器中的多个选项卡之间进行通信：
使用广播频道 API：广播频道 API 是 HTML5 提供的一种跨页面通信机制。 该 API 允许您在不同选项卡之间发送消息，以实现实时、双向通信。 使用 localstorage 或 sessionstorage：localstorage 和 sessionstorage 是浏览器提供的本地存储机制。 跨表通信可以通过在一个选项卡中修改 localstorage 或 sessionstorage 中的数据，然后在其他选项卡中侦听该数据的更改来实现。 使用 sharedworker：sharedworker 是一种特殊类型的 Web worker，可由多个浏览器选项卡共享。 使用 sharedworker，不同的选项卡可以通过消息传递进行通信。 Cookie 的使用：通过在同一域下设置 Cookie，不同的选项卡可以共享此 Cookie 数据。 可以在一个选项卡中设置cookie，然后在另一个选项卡中读取以进行通信。 使用窗口postmessage：window.postmessage 方法支持不同浏览器窗口之间的跨域通信。 您可以在一个窗口中使用 postmessage 方法将消息发送到其他窗口，接收窗口通过侦听消息事件来接收和处理消息。 广播频道 API 是 HTML5 提供的一种跨页面通信机制，它支持同一域名下的多个浏览器选项卡之间的实时双向通信。
使用广播频道 API，您可以创建一个频道，不同的选项卡可以通过该频道发送和接收消息。 每个选项卡都侦听通道中的消息，并相应地处理收到的消息。
使用广播频道 API 实现多个选项卡之间的通信的步骤如下：
1. 创建一个 broadcastchannel 对象并指定唯一的频道名称：
const channel = new broadcastchannel('channelname');2. 在一个选项卡中发送消息：
channel.postmessage('message');3. 收听消息并在其他选项卡中回复：
channel.addeventlistener('message', event => )通过广播频道API，不同的标签页可以实时收发消息，从而实现多个标签页之间的通信。 这对于跨多个选项卡共享状态、同步数据或启用协作等方案非常有用。 请注意，广播频道 API 仅适用于同一域名下的选项卡之间，不支持跨域通信。
SharedWorker 是在 HTML5 提供的多个选项卡之间共享的 Web Worker。 使用 sharedworker，多个浏览器选项卡可以共享单个后台线程，以便进行跨页面通信和数据共享。
下面是使用 sharedworker 在多个选项卡之间进行通信的示例：
在 j**ascript 文件中 （workerjs）。
// worker.JS 在共享工作线程自身中侦听消息onconnect = function(event) ;处理端口。 断开连接时onclose = function()在多个页面中引入共享工作线程，并相互通信：
第 1 页var sharedworker = new sharedworker（'worker.js');获取共享 worker 的端口var port = sharedworkerport;发送消息端口postmessage('message from page 1');接收消息端口onmessage = function(event) ;第 2 页var sharedworker = new sharedworker（'worker.js');获取共享 worker 的端口var port = sharedworkerport;发送消息端口postmessage('message from page 2');接收消息端口onmessage = function(event) ;在上面的例子中，worker.js创建一个 sharedworker，用于侦听来自多个页面的连接请求，并为每个连接创建一个端口。 每个页面通过创建 sharedworker 实例并获取 port 对象来发送和接收消息。
通过 sharedworker，第 1 页和第 2 页可以跨选项卡进行通信。 他们可以向共享工作线程发送消息并监听共享工作线程返回的消息，从而实现跨页面数据交互和共享。
需要注意的是，SharedWorker 需要在支持 SharedWorker 的浏览器中运行，并且需要在服务器环境中运行，即通过 HTTP 或 HTTPS 协议访问页面才能工作。
window.postmessage()是 HTML5 提供的一种用于不同窗口之间跨域通信的方法。 它可以安全地将消息发送到其他窗口，并在接收方窗口中触发消息事件。
这里有一个用途postmessage()跨窗口通信示例：
在发送邮件的窗口中：
向目标窗口发送消息postmessage('hello, world!', '');在接收消息的窗口中：
侦听消息事件窗口addeventlistener('message', function(event) }在发送消息的窗口中，使用window.postmessage()发送消息，第一个参数是要发送的消息内容，第二个参数是目标窗口的来源，可以是URL、域名或通配符'*'。
在接收消息的窗口中，通过侦听message事件，可以从其他窗口捕获消息。 在事件处理程序中，传递event.origin您可以判断邮件来自哪个域。 您可以根据需要进行安全检查，以确保仅接收来自指定域名的邮件。
需要注意的是，postmessage()通常用于跨窗口通信，可以在不同的窗口或不同的域名之间进行通信。 使用时，需要确保目标窗口的源是可信的，以防止安全漏洞。 同时，接收消息的窗口需要显式监听消息事件并对其进行相应的处理。