target - 无法在 'postMessage' : target/origin mismatch http vs https 上执行 'DOMWindow'

Question

我预先道歉，因为我对我的问题感到非常困惑。我真的很困惑，因为这在我的生产站点上造成了问题。

我的网站上有一个 javascript 播放器，它可以播放可以托管在 youtube、soundcloud 或 vimeo 上的歌曲列表。昨天我注意到这个错误，当您尝试通过播放器按钮“跳过”加载新歌曲时，通常会出现此错误。这个错误是在最后一两天才开始的。我在 youtube api 发行说明中没有看到任何新内容，并且在使用 Chrome、Firefox 和 Safari 时会发生此错误，因此它很可能与浏览器的更改无关。不过，我使用的东西已经改变了，因为我已经 18 天没有推送新代码了。

示例播放列表在这里:http://www.muusical.com/playlists/programming-music

我想我已经隔离了重现错误的方法，以下是步骤:

播放 YouTube 托管的歌曲。

跳到列表中的任何其他歌曲(无论是通过按跳过按钮还是直接按歌曲行项目上的播放按钮)。

*请注意，如果播放列表中的第一首歌曲是 youtube 歌曲，即使没有播放最初加载的 youtube 歌曲，只需跳到另一首歌曲就会产生错误。

从本质上讲，一旦您加载和/或播放了 youtube 歌曲并尝试跳到另一首歌曲，错误似乎就会发生。

如果您发现此行为的异常，请告诉我。

我在控制台中看到此错误:

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

我使用 youtube javascript api 加载播放器:

new YT.Player('playlist-player', {
      playerVars: { 'autoplay': 1, 'fs': 0 },
      videoId: "gJ6APKIjFQY",
      events: {
        'onReady': @initPlayerControls,
        'onStateChange': @onPlayerStateChange
      }
    })

产生这个 iframe:

<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/gJ6APKIjFQY?autoplay=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.muusical.com"></iframe>

从上面的 youtube 歌曲点击跳过后，这是我在 iframe 中看到的内容:

<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""></iframe>

我支持 youtube、soundcloud 和 vimeo 歌曲。似乎一旦加载了 youtube 歌曲，“来源”就会从 http 更改为 https。我认为没有必要为其他主机包含嵌入方法，因为即使整个播放列表只是 youtube 并且它不会出现在仅包含来自 soundcloud 和 vimeo 的歌曲的播放列表中，也会发生此错误。

另外，这就是我加载 youtube javascript 的方式:

// Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

如果您需要我澄清任何事情，请告诉我，并提前感谢您的查看。

Answer 1

我已经阅读了一些关于此的内容，这里和那里的一些 SO 帖子以及此链接:https://code.google.com/p/gdata-issues/issues/detail?id=5788

我正要对你的问题发表评论，说我对此感到很疯狂......但是当我开始描述我的设置时，我找到了一种避免这个问题的方法^^。

我从一个空的 div 开始元素，并使用 Youtube Iframe API 将其转换为 iframe具有所有必要的选项。

我有多个像这样的 div，并且通常使用相同的 JS 变量来存储所有这些玩家，但一次一个(一个替换另一个，依此类推...... - 可能会更好，我知道)。

为了解决这个问题，我想到了 摧毁 与 youtubePlayer.destroy(); 的玩家在从另一个元素构建一个新元素之前。我的 Chrome 控制台中不再出现 JS 错误:)。

希望它有所帮助，我能读到的关于 http 和 https 的所有文献都不适用于我的案例，因为我没有自己设置 iframe URL，而且我的网站恰好不是 https ...

我确实恢复了异步调用而不是静态调用 script标记在我的 HTML 中，但我认为这没有必要。

编辑 :此错误消息实际上具有很大的误导性，它只是含糊地表示:您没有以正确的方式使用 youtube API :)