如何解决 YouTube 嵌入中的“无法在 'DOMWindow' 上执行 'postMessage'”错误答案

【问题标题】：How to resolve the 'Failed to execute 'postMessage' on 'DOMWindow'' error from a YouTube embed如何解决 YouTube 嵌入中的“无法在 'DOMWindow' 上执行 'postMessage'”错误
【发布时间】：2014-05-20 20:29:37
【问题描述】：

使用 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，但我不知道如何解决它。

更新：

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

【问题讨论】：

标签： javascript youtube youtube-api youtube-javascript-api postmessage

【解决方案1】：

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

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

而不是

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

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

【讨论】：