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

Question

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

我知道你可以在应用程序和iFrame之间这样做，但是不同的标签呢?

更新:

的情况:

1. 用户播放音频从vk.com在一个选项卡

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

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

4. vk.com使音频静音

谢谢

Answer 1

如果在iFrame中加载一个"intermediate page"

(理论上的)解决方案使用两种不同的页面间通信方法:

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

"中间页"充当代理，将消息事件转换为localStorage事件，反之亦然。如果你把这个"中间页面"从两个页面加载到iFrame中，那么你在一个选项卡中发布的任何消息都会在另一个选项卡中弹出:

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

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

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

Answer 2

跟进这个线程。这里也是一样。使用window.open("originB")从源a打开一个不同的源。正如Lakhan Jain所说，理论上我们可以使用window.postMessage() (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)在具有不同起源的窗口之间进行通信。我们只需要有另一个窗口的引用。

问题是，即使我们延迟postMessage直到源B完全加载，我们也无法侦听来自源A的事件。