Question

这是我收到的错误消息：

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且来源是{{ 1}}。

我没有遇到问题。有什么问题？
我该如何解决？

Answer 1

我认为这是目标来源为https的问题。我怀疑是因为您的iFrame网址使用的是http而不是https。尝试将您要嵌入的文件的网址更改为https。

例如：

var id = getId(url);
  return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}

是：

var id = getId(url);
  return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}

Answer 2

只需将参数$users = \App\Users::get(); foreach ($users as $user) { dd($user->plan); }与您网站的网址一起添加到播放器的"origin"属性中，如下所示：

paramVars

Answer 3

设置此似乎可以解决它：

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

Answer 4

您可以保存到本地文件中：

在第一个文件中，player_api输入了以下代码：

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

进入第二，找到一些像： this.a.contentWindow.postMessage（a，b [c]）;

并改为：

if(this._skiped){
    this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

当然，你可以连接成一个文件 - 效率更高。这不是完美的解决方案，但它的工作原理！

我的来源：yt_api-concat

PS：对不起，英语不是我的第一个语言。

Answer 5

尝试使用window.location.href为网址匹配窗口的原点。

Answer 6

我得到了同样的错误。我的错误是enablejsapi=1 src中没有iframe参数。

Answer 7

确保您正在从以下网址加载：

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1

注意“ origin”组件以及“ enablejsapi = 1”。来源必须与您的域相匹配，然后它将被列入白名单并可以使用。

Answer 8

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

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

就我而言，YouTube 在第一次加载具有许多视频 API 数据请求、高负载的同一网页后阻止访问。

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

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

如果我在新浏览器中加载网页，则不会出现此问题，当我重新加载同一页面时，会出现此问题。

Answer 9

可能存在以下任何一种情况，但是所有这些都导致DOM在被javascript访问之前未加载。

因此，在实际调用JS代码之前，您需要确保以下几点： *确保容器已加载，然后再调用任何javascript *确保将目标URL加载到必须包含的任何容器中

我遇到了类似的问题，但是当我试图在首页的onLoad之前导致我的Javascript运行良好时，这会导致错误消息。我已经解决了，只需等待整个页面加载，然后调用所需的函数即可。

您可以简单地通过在页面加载后添加超时函数来执行此操作，然后调用onload事件，如：

window.onload = new function（）{ setTimeout（function（）{ //一些onload事件 }，10）; }

这将确保您尝试执行的操作在触发onLoad之后能够很好地执行。

Answer 10

这对我有帮助（使用 Vue.js）

在这里找到vue-youtube

mounted() {
  window.YTConfig = {
    host: 'https://www.youtube.com/iframe_api'
  }
  const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'

  this.player = player(this.$el, {
    host,
    width: this.width,
    height: this.height,
    videoId: this.videoId,
    playerVars: this.playerVars
  })
  ...
}

更新：像这样的魅力一样工作：

...
youtube(
  video-id="your_video_code_here"
  nocookie
)
...
data() {
  return {
    playerVars: {
      origin: window.location.href,
    },
  };
},

Answer 11

添加origin=${window.location.host} or "*"是不够的。

在其之前添加https://，它将起作用。

另外，请确保您使用的是可嵌入的URL：取出视频ID，并连接一个字符串，该字符串具有YouTube视频前缀和视频ID +嵌入定义。

Answer 12

就我而言，这与延迟加载iframe有关。删除iframe HTML属性loading="lazy"可以解决我的问题。

Answer 13

只是希望避免出现控制台错误，我按照类似于以下步骤的与Artur较早答案的方法解决了该问题：

将YouTube Iframe API（从https://www.youtube.com/iframe_api下载到本地 yt-api.js 文件。
删除了插入www-widgetapi.js脚本的代码。
将www-widgetapi.js脚本（从https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl7VfO1r/www-widgetapi.js下载到本地 www-widgetapi.js 文件。
在 postMessage 调用中替换了在控制台中导致错误的 targetOrigin 参数，并用“ *”（表示无偏好-请参见https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ）。
将修改后的 www-widgetapi.js 脚本追加到 yt-api.js 脚本的末尾。

这不是最好的解决方案（修补了本地脚本，无法维护发送消息的位置），但是它解决了我的问题。

在使用此解决方案之前，请参阅有关删除此处所述的targetOrigin URI的安全警告-https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Patched yt-api.js example

Answer 14

在某些情况下（如一位评论者所述），这可能是由于您在DOM中移动播放器而引起的，例如append等。

Answer 15

在我看来，至少这是一种无害的“未就绪”条件，API会重试直到成功。

我得到了其中的两个到九个（在我的最坏情况测试器中，一本2009 FossilBook带有通过蜂窝热点打开的20个选项卡）....但随后视频正常运行。一旦运行了我基于postMessage的seekTo绝对有效的调用，就没有测试其他人。

Answer 16

在对window.postMessage()的调用中未指定targetOrigin时，也会收到此消息。

在此示例中，我们将消息发布到第一个iFrame并使用*作为目标，这应允许与任何targetOrigin进行通信。

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

Answer 17

您可以尝试：

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

Answer 18

我的是：

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

我刚刚删除了与playerVars的一行，并且它在控制台上正常运行而没有错误。

Answer 19

您可以将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>

ref：https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Answer 20

删除DNS预取将解决此问题。

如果您使用的是WordPress，请将此行添加到主题的functions.php中。

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

Answer 21

这个确切的错误与Youtube在某些网站或应用程序上播放的内容块有关＆＃34;。更具体地说，由WMG（华纳音乐集团）。

然而，错误消息表明https iframe导入到http网站是个问题，在这种情况下它不是。

Answer 22

我遇到了同样的问题，事实证明这是因为我的Chrome扩展程序“HTTPS Everywhere”正在运行。禁用扩展程序解决了我的问题。

Answer 23

我认为错误的描述具有误导性，并且最初与错误使用播放器对象有关。

切换到Slider中的新视频时遇到了同样的问题。

当简单地使用player.destroy()函数described here时，问题就消失了。

Answer 24

我也遇到了同样的问题，然后我访问official Youtube Iframe Api，发现了这个问题：

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

徘徊，看看该官方页面也面临此问题。只需访问official Youtube Iframe Api并查看控制台日志。我的Chrome版本是79.0.3945.88。

无法执行＆＃39; postMessage＆＃39;在＆＃39; DOMWindow＆＃39;：https：//www.youtube.com！== http：// localhost：9000

24 个答案: