在“DOMWindow”上执行“postMessage”失败:https://www.youtube.com !== http://localhost:9000

这是我得到的错误信息:

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

我见过其他类似的问题，其中目标源是http://www.youtube.com，收件人源是https://www.youtube.com，但没有一个像我的问题一样，目标是https://www.youtube.com，源是http://localhost:9000。

我不明白这个问题。有什么问题吗? 我该怎么解决呢?

当前回答

你可以改变你的iframe像这样，并添加原点为您当前的网站。它解决了我浏览器上的错误。

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

裁判:https://developers.google.com/youtube/iframe_api_reference # Loading_a_Video_Player

2019-01-15 09:21:09

其他回答

删除DNS预取可以解决此问题。

如果你使用WordPress，在主题的functions.php中添加这一行

remove_action( 'wp_head', 'wp_resource_hints', 2 );

2018-08-19 14:08:17

我想我们可以定制YT的sendMessage。球员

playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
   a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
   var url = new URL(this.h.src), origin = url.searchParams.get("origin");
   if (origin && this.h.contentWindow) {
       this.h.contentWindow.postMessage(a, origin)
   }
}

我在我的项目中使用了这个函数来求解。

2021-12-14 15:41:10

它看起来只是一个Chrome安全系统，阻止重复请求，使用CORB。

https://www.chromestatus.com/feature/5629709824032768

在我的案例中，YouTube在第一次加载相同的网页后阻止访问，该网页有许多视频API数据请求，高负载。

对于负载较低的页面，则不会出现此问题。

在Safari和其他非基于Chronuim的浏览器中，不会出现此问题。

如果我在新的浏览器中加载网页，问题不会发生，当我重新加载同一页面时，问题就出现了。

2021-01-14 06:14:53

我也面临着同样的问题，然后我访问了Youtube官方Iframe Api，在那里我发现了这个:

用户的浏览器必须支持HTML5的postMessage特性。大多数现代浏览器都支持postMessage

而彷徨看到的官方页面也面临着这个问题。只需访问官方Youtube Iframe Api，查看控制台日志。我的Chrome版本是79.0.3945.88。