Javascript window.postmessage（）用于在不同选项卡中的应用程序之间进行通信

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

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

更新：

案例场景：

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

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

youtube.com将postmessage（）发送到vk.com 视频开始播放

vk.com使音频静音

---

谢谢

如果您使用在iFrame中加载的“中间页”，则可以完成此操作

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

• window.postMessage（）

• localStorage

  或

  sessionStorage

  -请参阅以了解其工作原理；该技术包括在一个iFrame中设置值，并在另一个iFrame中侦听事件

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

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

如果其中一个选项卡与中间页面位于同一域（此处图示为

选项卡2

），则可以简化此操作（而不影响其他选项卡的设置）

---

如果使用在iFrame中加载的“中间页”，则可以完成此操作

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

• window.postMessage（）

• localStorage

  或

  sessionStorage

  -请参阅以了解其工作原理；该技术包括在一个iFrame中设置值，并在另一个iFrame中侦听事件

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

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

如果其中一个选项卡与中间页面位于同一域（此处图示为

选项卡2

），则可以简化此操作（而不影响其他选项卡的设置）

---

你看到了吗？谢谢，那是4年前的事了，所以我希望有更新。你看到了吗？谢谢，那是4年前的事了，所以我希望有更新。为什么有iframe？为什么不直接在选项卡1和选项卡2中使用localStorage？问题是关于两个不同域上的两个选项卡进行通信-localStorage对于每个域是独立的，因此，至少有一个选项卡需要包含iframe，这样它就可以从与其他选项卡相同的域加载一些内容。@CloudFoots您能再解释一下如何实现它吗？我试图像你的流程一样实现它，但没有成功。（我说的是“中间页”的概念）@Jumpa：每个主机页都在iFrame中加载相同的中间页。为了广播，主机页使用

iFrame.contentWindow.sendMessage（…）

将数据发送到中间页。当中间页收到“message”事件时，它使用

sessionStorage.setItem（…）

将消息数据写入本地存储器。这会导致中间页的所有其他副本接收“存储”事件。当中间页获得“存储”事件时，它使用

parent.postMessage（…）

将数据发送到其主机页。然后，所有其他主机页都会收到一个包含广播数据的“消息”事件。为什么还要使用iframe呢？为什么不直接在选项卡1和选项卡2中使用localStorage？问题是关于两个不同域上的两个选项卡进行通信-localStorage对于每个域是独立的，因此，至少有一个选项卡需要包含iframe，这样它就可以从与其他选项卡相同的域加载一些内容。@CloudFoots您能再解释一下如何实现它吗？我试图像你的流程一样实现它，但没有成功。（我说的是“中间页”的概念）@Jumpa：每个主机页都在iFrame中加载相同的中间页。为了广播，主机页使用

iFrame.contentWindow.sendMessage（…）

将数据发送到中间页。当中间页收到“message”事件时，它使用

sessionStorage.setItem（…）

将消息数据写入本地存储器。这会导致中间页的所有其他副本接收“存储”事件。当中间页获得“存储”事件时，它使用

parent.postMessage（…）

将数据发送到其主机页。所有其他主机页随后接收包含广播数据的“消息”事件。