javascript - 无法在“DOMWindow”上执行“postMessage”：https://www.youtube.com !== http://localhost:9000

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和原点一样http://localhost:9000。

我不明白这个问题。问题是什么？
我该如何解决？

score 113 · Accepted Answer

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

例如：

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

成为：

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

score 38 · Accepted Answer

只需在播放器的属性中添加"origin"带有您网站 URL的参数，如下所示：paramVars

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width: '100%',
    playerVars: { 
        'autoplay': 1,
        'controls': 0,
        'autohide': 1,
        'wmode': 'opaque',
        'origin': 'http://localhost:8100' 
    },
}

score 22 · Accepted Answer

设置它似乎可以解决它：

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

score 12 · Accepted Answer

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

在第一个文件中，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

score 6 · Accepted Answer

确保从 URL 加载，例如：

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”。来源必须与您的域相匹配，然后它将被列入白名单并正常工作。

score 3 · Accepted Answer

3

我得到了同样的错误。我的错误是srcenablejsapi=1中不存在该参数。iframe

于 2018-04-06T11:46:04.650 回答

score 2 · Accepted Answer

2

尝试使用window.location.hrefurl 来匹配窗口的来源。

于 2017-10-17T20:28:42.493 回答

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

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

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

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

在我的例子中，至少这似乎是 API 重试直到成功的无害“未准备好”条件。

我得到了其中的两个到九个（在我的最坏情况测试仪上，一个 2009 FossilBook，通过蜂窝热点打开了 20 个标签）....但是视频功能正常。一旦它运行我对 seekTo 的基于 postMessage 的调用肯定会工作，还没有测试过其他人。

score 0 · Accepted Answer

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

但是，错误消息确实表明将 https iframe 导入到 http 站点是问题所在，但在这种情况下并非如此。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

I had this same problem and it turns out it was because I had the Chrome extension "HTTPS Everywhere" running. Disabling the extension solved my problem.

score 0 · Accepted Answer

在某些情况下（正如一位评论者提到的），如果您在 DOM 中移动播放器，可能会导致这种情况，例如append等等。

score 0 · Accepted Answer

我认为我们可以自定义 YT.Player 的 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)
   }
}

我在我的项目中使用此功能来解决。

score 0 · Accepted Answer

只是希望避免控制台错误，我使用与 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/邮件）。
将修改后的www-widgetapi.js脚本附加到yt-api.js脚本的末尾。

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

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

修补 yt-api.js 示例

score 0 · Accepted Answer

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

在它之前添加https://它会起作用。

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

score 0 · Accepted Answer

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

因此，在实际调用 JS 代码之前，您必须确保： * 确保容器在调用任何 javascript 之前已加载 * 确保目标 URL 已加载到它必须加载的任何容器中

我遇到了类似的问题，但在我的本地，当我试图让我的 Javascript 在导致错误消息的主页的 onLoad 之前运行良好时。我通过简单地等待整个页面加载然后调用所需的函数来修复它。

您可以通过在页面加载时添加超时功能并调用您的 onload 事件来简单地做到这一点，例如：

window.onload = new function() { setTimeout(function() { // 一些 onload 事件 }, 10); }

这将确保您尝试的内容在触发 onLoad 后执行得很好。

score 0 · Accepted Answer

这对我有帮助（使用 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,
    },
  };
},

score 0 · Accepted Answer

移除 DNS Prefetch 将解决此问题。

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

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

score 0 · Accepted Answer

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

在滑块中切换到新视频时，我遇到了同样的问题。

当简单地使用这里描述player.destroy()的功能时，问题就消失了。

score -1 · Accepted Answer

我的是：

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

我刚刚删除了 playerVars 的行，它在控制台上没有错误。

score -1 · Accepted Answer

我也遇到了同样的问题，然后我访问了官方的 Youtube Iframe Api，在那里我发现了这个：

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

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

score -1 · Accepted Answer

你可以试试：

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

javascript - 无法在“DOMWindow”上执行“postMessage”：https://www.youtube.com !== http://localhost:9000

25 回答 25

Related

Reference