通过AngularJS指令，从Froogaloop收到了“无法执行'postMessage'”错误。

Question

我编写了一个AngularJS指令，使用Vimeo的froogaloop库内置播放/暂停功能来处理视频。

它运行良好！唯一的问题是当页面首次加载时，会出现以下错误：

“执行'postMessage'失败：目标源（'http://player.vimeo.com'）与接收窗口的源不匹配。”

我在指令中初始化froogaloop对象有误吗？ 非常感谢您的任何建议。

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

- npatten

---

不幸的是，这并不是你可以做任何事情的。 Vimeo 正试图使用 postMessage(msg, 'http://vimeo.com/') 与其父窗口进行通信（请注意，它不是使用 (postMessage(msg, '*'))），因此该 postMessage 只对父窗口有意义，而不适用于你的应用程序。因此，它仅在嵌入在 Vimeo.com 上的 iframe 中传递。 - Wildhoney

请问您能否分享一下指令？我正在寻找一个实现方法！没事了，我刚才没看到那个 Plnkr。 - Are Almaas

Answer 1

我建议在<iframe>的onLoad事件中执行代码。这样，您可以确保代码在iframe准备好接收消息时执行。

有很多方法可以做到：

• 如果您已经在项目中使用jQuery，则可以使用：$('iframe').load(callback) 或
• 编写一个EventListener：iframe_element.addEventListener('load', callback) 或
• 使用普通的onload回调： iframe_element.onload = callback

其中callback是使用Froogaloop的方法。

但您必须知道，这些解决方案中的一些可能在旧版/ MS浏览器上存在一些缺陷。

- Ravbaker

Answer 2

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

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

- Yauheni Leichanok