这是我得到的错误信息:

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。

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


当前回答

我也有同样的问题,原来是因为我有Chrome扩展“HTTPS无处不在”运行。禁用扩展解决了我的问题。

其他回答

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

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

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

我在尝试嵌入一个条纹定价表时得到了类似的错误消息:

通过自定义WordPress短代码通过PHP添加嵌入代码 或者使用JavaScript动态地将代码追加到页面(即使使用setTimeout()延迟来确保DOM被加载也不起作用)。

我可以在我的WordPress网站上解决这个问题,方法是在块编辑器中使用纯html代码将代码添加到WordPress页面本身。

你可以改变你的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

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

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

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

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

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

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

在我的情况下,这与延迟加载iframe有关。删除iframe HTML属性loading="lazy"为我解决了这个问题。