来自 Froogaloop 通过 AngularJS 指令的“无法执行‘postMessage’”错误答案

【问题标题】："Failed to execute 'postMessage'" error from Froogaloop via AngularJS directive来自 Froogaloop 通过 AngularJS 指令的“无法执行‘postMessage’”错误
【发布时间】：2014-02-09 09:31:15
【问题描述】：

我使用他们的 froogaloop 库为 vimeo 视频编写了一个 AngularJS 指令，具有内置的播放/暂停功能。

效果很好！唯一的问题是页面首次加载时出现以下错误。

在“DOMWindow”上执行“postMessage”失败：提供的目标来源（“http://player.vimeo.com”）与收件人不匹配窗口的来源

我在指令中初始化 froogaloop 对象是否错误？任何建议将不胜感激。

你可以在这里查看 plunker：http://plnkr.co/edit/GKWNk3LhX0MR3lhpfqyA

【问题讨论】：

遗憾的是，这不是您可以做的任何事情。 Vimeo 正在尝试使用postMessage(msg, 'http://vimeo.com/') 与其父窗口通信（注意它不是使用(postMessage(msg, '*')），因此postMessage 只对父窗口有意义，对您的应用程序没有意义。因此，它仅在 iframe 嵌入 Vimeo.com 时交付。
愿你谦卑的自己分享指令吗？自己寻找一个实现！ nvm，没看到 plnkr

标签： angularjs iframe angularjs-directive vimeo froogaloop

【解决方案1】：

我建议从<iframe> 执行onLoad 事件中的代码。然后确保当 iframe 准备好接收消息时代码将执行。

有很多方法可以做到：

如果您的项目中已经有 jQuery，您可以使用它：$('iframe').load(callback) 或
编写一个事件监听器：iframe_element.addEventListener('load', callback) 或
使用普通的加载回调：iframe_element.onload = callback。

其中callback是使用Froogaloop的方法。

但是您必须知道，其中一些解决方案可能在某些旧/MS 浏览器浏览器上存在一些缺点。

【讨论】：

【解决方案2】：

对我来说，看起来 angularjs 在实际渲染页面上的 iframe 之前触发了 Player API。至少如果我推迟 scope.$watch 它工作正常：

$timeout(function() {
    scope.$watch('controlBoolean', function() {/* your code goes here */});
});

【讨论】：