首页 > 解决方案 > 子 iframe 之间的通信

问题描述

我已经构建了一个通过 iframe 嵌入的播放器。如果嵌入了两个播放器,我想在另一个开始播放时停止其中一个。所以问题是,是否可以postMessage在不拥有父级的情况下使用两个子级 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 问题。

假设:

标签: javascriptiframeembed

解决方案


有点 hacky,但你可以在localStorage之上建立一个沟通渠道。帧可以通过写入 localStorage 来发送消息,然后通过不断轮询 localStorage 来读取消息以进行更改。


推荐阅读