无法在"DOMWindow"上执行"postMessage":目标/来源不匹配http与https [英] Failed to execute 'postMessage' on 'DOMWindow': target/origin mismatch http vs https

问题描述

我很抱歉对我的问题感到困惑.我真的处于困境，因为这在我的生产站点上引起了问题.

I apologize up front as I'm very confused by my problem. I'm really in a bind because this is causing a problem on my production site.

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

I have a javascript player on my site which plays through song lists which can be hosted on youtube, soundcloud or vimeo. Yesterday I noticed this error which generally arises anytime you try to load a new song through "skipping" with the player buttons. This error just started in the last day or two. I am not seeing anything new in the youtube api release notes and this error occurs using Chrome, Firefox and Safari, so it is most likely not related to a change in the browser. Something that I am using has changed though, as I have not pushed new code in 18 days.

此处有一个播放列表示例: http://www.muusical.com/playlists/programming-音乐

An example playlist is here: http://www.muusical.com/playlists/programming-music

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

I think I have isolated the way to reproduce the error, here are the steps:

1. 播放youtube托管的歌曲.
2. 跳到列表中的任何其他歌曲(无论是按跳过按钮还是直接按歌曲行项目上的播放按钮).

*请注意，如果播放列表中的第一首歌曲是youtube歌曲，那么即使不播放最初加载的youtube歌曲，只要跳到另一首歌曲也会产生错误.

*Note, that if the first song in the playlist is a youtube song, simply skipping to another song even without playing the initially loaded youtube song will produce the error.

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

Essentially, the error seems to occur once you have loaded and/or played a youtube song and attempt to skip to another song.

如果您发现此行为的例外情况，请告诉我.

Let me know if you find an exception to this behavior.

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

I see this error in the console:

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加载了播放器:

I load the player with using the youtube javascript api:

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

哪个会生成此iframe:

Which produces this 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中看到的内容:

After hitting skip from the above youtube song, this is what I see loaded in the 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歌曲的播放列表中，否则会发生此错误.

I support youtube, soundcloud and vimeo songs. It seems like once a youtube song is loaded the "origin" changes from http to https. I don't think it is necessary to include the embedding methods for the other hosts as this error occurs even if the entire playlist is only youtube and it does not occur in a playlist which consists of only songs from soundcloud and vimeo.

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

Also, this is how I am loading the 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);

请让我知道是否需要我澄清任何事情，并感谢您先看一眼.

Please let me know if you need me to clarify anything and thanks in advance for taking a look.

推荐答案

@sodawillow的回答部分正确，但我想提供解决方案的详细信息以及是什么导致我的代码停止调用.destroy()方法删除YouTube播放器.

@sodawillow's answer is partially correct but I'd like to give the details to the solution and what caused my code to stop calling the .destroy() method to remove the youtube player.

我的网站上有一个播放器，它可以交换来自各个站点的歌曲，其中之一就是Youtube.根据播放器的类型，可以有不同的删除播放器的方法.我的代码检查是否存在youtube播放器，如果通过检查，则使用只有youtube播放器具有的.destroy()方法.问题是YouTube更改了其播放器对象上某些静态变量的名称.例如，如果我通过以下方式创建了播放器:

My site has a player which swaps out songs from various sites, one of them being Youtube. There can be different methods for removing a player depending on the type it is. My code checks for the existence of a youtube player and if passes the check then it uses the .destroy() method which only the youtube player has. The problem is that YouTube changed the names of some of the static variables on their player object. For example, if I created a player via:

var player = new YT.Player('playlist-player', {
      playerVars: { 'autoplay': 1, 'fs': 0 },
      videoId: "gJ6APKIjFQY",
      events: {
      }
    })

然后将有一个变量player.L，其中包含字符串"player".因此，要检查当前播放器是否是YouTube播放器并将其删除，我这样做:

then there would be a variable player.L which held the string "player". So to check if the current player was a YouTube player and remove it I did this:

if (player.L == "player") {
  player.destroy();
} else {
//handle the removal of the Soundcloud or Vimeo player.
}

最近一段时间，Youtube将字符串"player"的位置更改为现在位于player.M.我可以更改上面的代码，以检查player.M而不是player.L，这可以工作，但是为了避免将来出现此问题，我改为实现了

Sometime recently Youtube changed the location of the string "player" to now reside at player.M. I could change the above code to check player.M instead of player.L and that would work but to try to avoid this issue in the future I instead have implemented:

if (player.destroy) {
  player.destroy();
} else {
//handle the removal of the Soundcloud or Vimeo player.
}

只要Youtube不删除未声明的.destroy()方法，就不会造成任何问题.

As long as Youtube does not remove the .destroy() method unannounced this will not cause any issues.

因此，总而言之，问题出在@sodawillow所猜，我没有使用.destroy()方法删除Youtube播放器.原因是因为Youtube对他们的api进行了一些未经通知的更改，从而更改了某些静态变量的位置.

So in summary, the issue was as @sodawillow guessed, I was not using the .destroy() method to remove the Youtube player. The reason was because Youtube made some unannounced changes to their api, changing the location of some of the static variables.

这篇关于无法在"DOMWindow"上执行"postMessage":目标/来源不匹配http与https的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！