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

IT技术 javascript angularjs youtube youtube-api youtube-iframe-api
2021-02-02 20:02:00

这是我收到的错误消息:

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

  1. 我不明白这个问题。问题是什么?
  2. 我该如何解决?
6个回答

我相信这是目标原点的问题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';
为 youtube 更改为 https:// 而我的域是 https:// 仍然没有解决我的问题。无法在“DOMWindow”上执行“postMessage”:提供的目标源(“ youtube.com ”)与收件人窗口的源(“ test.dev ”)不匹配
2021-03-16 20:02:00
如果我使用 javascript 加载 YouTube 播放器怎么办?
2021-03-20 20:02:00
这似乎奏效了。谢谢!所以问题是httpvs. https? 域不同(youtube 与 localhost)无关紧要?目标来源与收件人来源究竟是什么?您所说的如何更改收件人来源(我的网址仍然是 localhost:9000)?
2021-04-06 20:02:00
这个错误有点误导。这实际上与您在localhost:9000. 问题实际上在于您使用 youtube-api 的方式。当您tag.src = "https://www.youtube.com/iframe_api";在代码中声明 api 时,您是在告诉 youtube 您要使用 ssl。因此,我建议的更改将您更改为使用 ssl 来请求视频。错误只是说您混合了 ssl 和非 ssl 调用。
2021-04-06 20:02:00
当我尝试在 dom 中移动 iframe 时遇到了这个问题。 playerEl = document.querySelector('iframe#ytplayer'); anotherEl.appendChild(playerEl); // yt complains on subsequent api calls
2021-04-11 20:02:00

只需在播放器"origin"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' 
    },
}
正如 API 文档所说, origin playerVar 仅用于纯 iframe 实现。不是 JS API 之一。
2021-03-12 20:02:00
@JamesBailey window.location.origin..window.location是一个对象。
2021-03-14 20:02:00
所有这些“修复”在 2020 年对我们都不起作用。另外,当错误显示时,它会随机加载每页。这是我们网站和 youtube 之间的竞争条件。
2021-03-24 20:02:00
来源:window.location,在属性中覆盖开发和生产
2021-03-30 20:02:00
window.location.host
2021-03-30 20:02:00

设置这个似乎可以解决它:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',
这也为我修复了它。也可以这样做:host: `${window.location.protocol}//www.youtube.com`
2021-03-20 20:02:00
使它http (而不是https)解决了我的问题。
2021-04-04 20:02:00
所有这些“修复”在 2020 年对我们都不起作用。另外,当错误显示时,它会随机加载每页。这是我们网站和 youtube 之间的竞争条件。
2021-04-07 20:02:00
添加主机和原点对我有用
2021-04-10 20:02:00

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

这对我也有用,但我不确定为什么。你能解释为什么这会解决它吗?
2021-03-14 20:02:00
谢谢,在第二个 ajax 调用中回答了我的问题:stackoverflow.com/questions/58232081/...
2021-03-19 20:02:00
为我修好了。无论如何都有本地文件,所以适合我的用例。
2021-03-20 20:02:00
在我看来,将本地文件用于库,尤其是对于第三方服务库,是一种非常糟糕的编码方式。不 ?
2021-03-21 20:02:00
@DamienC 这肯定不太理想。但是,基于此线程上的所有其他“修复”,我并不感到惊讶(我也不会真正判断)其他开发人员手动更改 API 代码。
2021-04-06 20:02:00

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