javascript - 如何解决来自 YouTube 嵌入的 'Failed to execute ' postMessage' on 'DOMWindow' ' 错误

Question

我尝试使用 YouTube JavaScript/iFrame API 寻找视频的不同时间。

我已经精简了一个演示:http://jsbin.com/yuliponu

var player;
window.onYouTubeIframeAPIReady = function() {
  var iframe = document.createElement("iframe");
  iframe.width = 400;
  iframe.height = 300;
  iframe.id = "youtubeIframe";
  iframe.src = "https://www.youtube.com/embed/yta1WRuiupk?autoplay=1&enablejsapi=1&origin="+encodeURIComponent(window.location.protocol+"//"+document.domain)+"&playsinline=1&rel=0";
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowFullScreen', '');
  document.getElementById("video").appendChild(iframe);

  player = new YT.Player('youtubeIframe');
};

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

如果您查看控制台，您将看到此错误:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://jsbin.com').

我需要解决此问题才能开始使用 JavaScript API，但我不确定如何修复它。

更新:

我已经重新启动了我的电脑，并且没有发生错误。如果我再次看到错误，我会更新。

Answer 1

问题是您正在使用普通 HTTP 传输的站点上进行测试，但您请求了 SSL 版本的 youtube API。我确实认为 Google 已经在他们的 Youtube IFrame API JS 中修复了这个问题，但使用起来最优雅:

tag.src = "//www.youtube.com/iframe_api";

代替

tag.src = "https://www.youtube.com/iframe_api";

自动选择与父级相同的协议(protocol)。