子 iframe 之间的通信
Communication between child iframes
我构建了一个通过 iframe 嵌入的播放器。如果嵌入了两个播放器,我想在另一个播放器开始播放时停止。所以问题是,是否可以使用 postMessage
在两个子 iframe 之间进行通信,而无需拥有父 iframe? Vimeo 正在以某种方式做到这一点。如果我嵌入两个 vimeo 播放器,先播放一个,然后播放另一个,第二个播放器会停止第一个播放器。如何? (证明:https://jsfiddle.net/3fy14orw/2/)
在我的播放器中,当我的播放器播放时,我使用 postMessage
在父级 window 上触发一个事件。我已经确认这是有效的。我试过使用我的实际来源以及“*”作为来源。
//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..."
我也试过将我的框架命名为 windows,并通过 window.parent.frames 对象访问它们,但这也会引发 CORS 问题。
假设:
- 我的玩家同源。
- 我的播放器可以嵌入任何域,而不仅仅是我自己的域
有点老套,但您可以在 localStorage 之上建立一个沟通渠道。 Frames 可以通过写入 localStorage 来发送消息,然后通过不断轮询 localStorage 来读取消息。
我构建了一个通过 iframe 嵌入的播放器。如果嵌入了两个播放器,我想在另一个播放器开始播放时停止。所以问题是,是否可以使用 postMessage
在两个子 iframe 之间进行通信,而无需拥有父 iframe? Vimeo 正在以某种方式做到这一点。如果我嵌入两个 vimeo 播放器,先播放一个,然后播放另一个,第二个播放器会停止第一个播放器。如何? (证明:https://jsfiddle.net/3fy14orw/2/)
在我的播放器中,当我的播放器播放时,我使用 postMessage
在父级 window 上触发一个事件。我已经确认这是有效的。我试过使用我的实际来源以及“*”作为来源。
//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..."
我也试过将我的框架命名为 windows,并通过 window.parent.frames 对象访问它们,但这也会引发 CORS 问题。
假设:
- 我的玩家同源。
- 我的播放器可以嵌入任何域,而不仅仅是我自己的域
有点老套,但您可以在 localStorage 之上建立一个沟通渠道。 Frames 可以通过写入 localStorage 来发送消息,然后通过不断轮询 localStorage 来读取消息。