在前端开发中，经常需要实现选项卡或窗口之间的通信。比如，在网页中打开多个选项卡，其中一个选项卡的操作会影响到其他选项卡。本文将介绍几种实现选项卡或窗口之间通信的方法，并提供示例代码。
1. 使用 localStorage
localStorage 是 HTML5 提供的一种本地存储机制，可以让我们在浏览器中保存键值对数据。它可以在不同的选项卡或窗口之间共享数据，因此可以用来实现选项卡或窗口之间的通信。
下面是一个简单的示例，演示了如何使用 localStorage 在两个选项卡之间共享数据：
-- ------------ ---------------------------- ------ ---- --- ---- -- ------------ ----- ---- - ----------------------------- ------------------ -- --------- ---- --- --
上述代码中，我们在第一个选项卡中设置了键为 data 的数据，然后在第二个选项卡中获取了该数据。由于使用了同一份 localStorage，所以第二个选项卡中也能看到第一个选项卡中设置的数据。
需要注意的是，localStorage 存储的数据类型只能是字符串类型。如果要存储其他类型的数据，需要先将其转换为字符串形式。
2. 使用 Broadcast Channel
Broadcast Channel 是一个可以在不同的窗口或选项卡之间发送消息的 API。它是 HTML5 新增的功能，能够让我们更方便地实现选项卡或窗口之间的通信。
下面是一个使用 Broadcast Channel 实现选项卡之间通信的示例代码：
-- ---------- --------- ------- ----- ------- - --- ------------------------------- -- ---------- --------- ------- --- ----------------------------------- ----- -- - ------------------------ -- --------- ---- --- -- --- -- ------------ -------------------------- ---- --- ----
上述代码中，我们在第一个选项卡中创建了一个名为 my-channel 的 Broadcast Channel，并向其中发送了一条消息。在第二个选项卡中，我们监听了该 Broadcast Channel，当收到消息时，就会输出该消息的内容。
需要注意的是，Broadcast Channel 只能在同源的窗口或选项卡之间传递消息。
3. 使用 postMessage
postMessage 是 JavaScript 提供的一个 API，可以用来在不同的窗口或选项卡之间传递消息。与 Broadcast Channel 不同，postMessage 可以在跨域的窗口或选项卡之间传递消息。
下面是一个使用 postMessage 实现选项卡之间通信的示例代码：
-- ------------ ---------------------------------- ----- -- - -- ------------- --- ----------------------- ------- -- ------ ------------------------ -- --------- ---- --- -- --- -- ------------------- -------------------------------- ---- --- --- -----
上述代码中，我们在第一个选项卡中监听了 message 事件，并在收到消息时输出该消息的内容。然后，我们使用 window.parent.postMessage 向父窗口（即包含当前网页的窗口）发送了一条消息。
需要注意的是，当使用 postMessage 传递消息时，我们需要验证消息的来源，以确保消息不被恶意篡改或伪造。
总结
本文介绍了三种实现选项卡或窗口之间通信的
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13863