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

2020/10/23 21:41 · javascript ·  · 0评论

这是我收到的错误消息:

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. 我该如何解决?

我认为这与目标来源有关https我怀疑是因为您使用的是iFrame网址,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';

只需在播放器"origin"paramVars属性中将参数与您网站的URL添加在一起,如下所示:

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' },
}

设置它似乎可以解决此问题:

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

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

确保您从以下网址加载:

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”。来源必须与您的域相匹配,然后它将被列入白名单并可以使用。

尝试使用window.location.hrefurl以匹配窗口的原点。

我遇到了同样的错误。我的错误是该enablejsapi=1参数在iframesrc中不存在

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

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

仅使用此处描述player.destroy()功能时,问题就消失了。

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

当“在某些网站或应用程序上播放”时,此确切的错误与YouTube阻止的内容有关。更具体地说,是WMG(华纳音乐集团)。

但是,该错误消息确实表明问题是存在一个https iframe导入到http站点的问题,在这种情况下不是这样。

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

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

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

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

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

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

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

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

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

这样可以确保触发onLoad后,您尝试执行的操作能够很好地执行。

当未在调用中指定targetOrigin时,也会收到此消息window.postMessage()

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

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

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

我得到了其中的两个到九个(在我最坏的情况下,通过蜂窝热点打开的20个选项卡上的2009 FossilBook)....但视频正常运行。一旦运行了我的基于postMessage的对seekTo的调用就可以正常工作,就没有测试其他对象。

在某些情况下(如一位评论者所述),这可能是由于您在DOM之类的DOM中移动播放器而引起的,例如append

为了避免出现控制台错误,我使用了与Artur较早答案相同的方法来解决此问题,请执行以下步骤:

  1. 将YouTube Iframe API(从https://www.youtube.com/iframe_api)下载到本地yt-api.js文件。
  2. 删除了插入www-widgetapi.js脚本的代码。
  3. 将www-widgetapi.js脚本(从https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl7VfO1r/www-widgetapi.js)下载到本地www-widgetapi.js文件。
  4. 在控制台中引起错误postMessage调用中targetOrigin参数替换为“ *”(表示无首选项-参见https://developer.mozilla.org/en-US/docs/Web/API/Window/ postMessage)。
  5. 将修改后的www-widgetapi.js脚本附加yt-api.js脚本的末尾

这不是最大的解决方案(需要修补的本地脚本,无法控制发送消息的位置),但是它解决了我的问题。

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

修补的yt-api.js示例

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

你可以试试 :

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

我也遇到了同样的问题,然后我访问了官方的Youtube Iframe Api,发现了这一点:

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

并四处寻找官方页面也面临此问题。只需访问官方的Youtube Iframe Api并查看控制台日志。我的Chrome版本是79.0.3945.88。

我的是:

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

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

本文地址:http://javascript.askforanswer.com/wufazai-domwindowshangzhixing-postmessagehttps-www-youtube-com-http-localh.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!