简介
在前端开发中，我们经常需要在不同的浏览器标签页之间传递信息。这时候，我们可以使用 across-tabs 这个 npm 包来实现跨标签页通信。
across-tabs 提供了一种简单易用的 API，可以让你在多个浏览器标签页之间发送和接收消息。它支持 JSON 数据格式，而且完全基于事件驱动，非常适合在复杂的前端应用程序中使用。
本文将详细介绍如何使用 across-tabs npm 包来实现跨标签页通信。
安装
你可以通过 npm 来安装 across-tabs：
--- ------- ------ -----------
示例代码
下面是一个简单的示例，演示了如何使用 across-tabs 实现跨标签页通信。假设我们有两个页面：page1.html 和 page2.html。它们位于同一个域名下，但是在不同的浏览器标签页中打开。
page1.html
--------- -----
------
------
----------- ---------
-------
------
-------- ------
------- --------------------- ----------------
------- ----------------------------------------------------------------
--------
--- ------- - --- ------------------------------
---------------------------------------------------------------- ---------- -
-------------------------- ------- ----------
---
---------
-------
-------page2.html
--------- -----
------
------
----------- ---------
-------
------
-------- ------
---- -----------------------
------- ----------------------------------------------------------------
--------
--- ------- - --- ------------------------------
----------------- - --------------- -
--- ---------- - ---------------------------------------
-------------------- -- ----- - -------------------------- - -------
--
---------
-------
-------在 page1.html 中，我们创建了一个名为 channel 的广播通道，并在点击按钮时向该通道发送了一条消息。
在 page2.html 中，我们同样创建了一个名为 channel 的广播通道，并在收到消息时将其显示在页面上。
API 文档
across-tabs 提供了以下几个类和函数：
BroadcastChannel：用于创建一个广播通道。LocalStorageMessenger：用于创建基于本地存储的通道。WindowMessenger：用于在两个窗口之间创建通道。WebWorkerMessenger：用于在 Web Worker 中创建通道。TabID：表示浏览器标签页的 ID。Message：表示传递的消息。
BroadcastChannel
BroadcastChannel 是 across-tabs 中最常用的类之一。它用于创建一个广播通道，可以在多个浏览器标签页之间发送和接收消息。使用时只需要实例化该类即可：
--- ------- - --- ------------------------------
你还可以指定通道的名称：
--- ------- - --- ------------------------------------------
如果指定了通道名称，则同一名称的通道可以相互通信，而不同名称的通道是互相独立的。
postMessage(data)
向通道发送一条消息。消息可以是任何 JSON 数据类型。
-------------------------- ------- ----------
onmessage
当收到来自通道的消息时，该函数会被调用，并将消息作为参数传递进去。
----------------- - - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------