javascript - 子 iframe 之间的通信

Question

我构建了一个通过 iframe 嵌入的播放器。如果嵌入了两个播放器，我想在另一个播放器开始播放时停止。所以问题是，是否可以使用 postMessage 在两个子 iframe 之间进行通信，而无需拥有父 iframe？ Vimeo 正在以某种方式做到这一点。如果我嵌入两个 vimeo 播放器，先播放一个，然后播放另一个，第二个播放器会停止第一个播放器。如何？ (证明:https://jsfiddle.net/3fy14orw/2/)

在我的播放器中，我使用 postMessage 在我的播放器播放时触发父窗口上的事件。我已经确认这是有效的。我试过使用我的实际来源以及“*”作为来源。

//in my player
window.parent.postMessage(data, "*");

其他玩家怎么知道？我试过了，

//tried adding this in my player    
window.parent.addEventListener('message', function(evt) {});

但这会引发错误。

"SecurityError: Blocked a frame with origin..."

我也试过命名我的框架窗口，以及通过 window.parent.frames 对象访问它们，但这也会引发 CORS 问题。

假设:

• 我的玩家同源。
• 我的播放器可以嵌入任何域，而不仅仅是我自己的域

Answer 1

有点hacky，但你可以在localStorage 之上建立一个沟通 channel . Frames 可以通过写入 localStorage 来发送消息，然后通过不断轮询 localStorage 的更改来读取消息。