window.postmessage() 在不同选项卡中的应用程序之间进行通信

Question

是否有机会使用 window.postmessage() 在同一浏览器的不同选项卡中的两个不同应用程序之间进行通信？

我知道您可以在应用程序和 iFrame 之间执行此操作，但是不同的选项卡呢？

更新：

案例场景：

1. 用户在一个选项卡中播放来自 vk.com 的音频

2. 用户开始在另一个标签中播放来自 youtube.com 的视频

3. youtube.com 向 vk.com 发送 postmessage() 视频开始播放

4. vk.com 使音频静音

谢谢

Answer 1

如果您使用加载在 iFrame 中的“中间页面”，则可以做到这一点。

（理论上的）解决方案使用两种不同的页面间通信方法：

• window.postMessage()
• localStorage 或 sessionStorage - 请参阅 this guide 了解其工作原理；该技术涉及在一个 iFrame 中设置值，并在另一个 iFrame 中侦听事件。

“中间页面”充当代理，将消息事件转换为本地存储事件，反之亦然。如果您在两个页面的 iFrame 中加载此“中间页面”，那么您在一个选项卡中发布的任何消息都会在另一个选项卡中弹出：

[Tab 1] --(postMessage)--> [iFrame 1]
                                |
                          (localStorage)
                                |
                                v
                           [iFrame 2] --(postMessage)--> [Tab 2]

如果其中一个选项卡与中间页面位于同一域（此处显示为 Tab 2），则可以简化（不影响其他选项卡的设置）。

[Tab 1] --(postMessage)--> [iFrame 1]
                                |
                          (localStorage)
                                |
                                v
                             [Tab 2]