Javascript 无法在“DOMWindow”上执行“postMessage”：https://www.youtube.com !== http://localhost:9000
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27573017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000
提问by Adam Zerner
This is the error message that I get:
这是我收到的错误消息：
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').
I've seen other similar problems where the target origin is http://www.youtube.comand the recipient origin is https://www.youtube.com, but none like mine where the target is https://www.youtube.comand the origin is http://localhost:9000.
我见过其他类似的问题，其中目标来源是http://www.youtube.com，收件人来源是https://www.youtube.com，但没有一个像我的目标https://www.youtube.com和来源是http://localhost:9000。
- I don't get the problem. What is the problem?
- How can I fix it?
- 我不明白这个问题。问题是什么？
- 我该如何解决？
采纳答案by Chris Franklin
I believe this is an issue with the target origin being https. I suspect it is because your iFrame url is using httpinstead of https. Try changing the url of the file you are trying to embed to be https.
我相信这是目标原点的问题https。我怀疑这是因为您的 iFrame url 正在使用http而不是https. 尝试将您尝试嵌入的文件的 url 更改为https.
For instance:
例如：
'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
to be:
成为：
'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
回答by Flávio
Just add the parameter "origin"with the URL of your site in the paramVarsattribute of the player, like this:
只需在播放器"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' },
}
回答by M.Ali El-Sayed
Setting this seems to fix it:
设置这个似乎可以解决它：
this.player = new YouTube.Player(this.elementId, {
videoId: videoId,
host: 'https://www.youtube.com',
回答by Artur
You can save the JavaScript into local files:
您可以将 JavaScript 保存到本地文件中：
- https://www.youtube.com/player_api
- https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js
- https://www.youtube.com/player_api
- https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js
Into the first file, player_apiput this code:
在第一个文件中，输入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])}}());
Into the second file, find the code: this.a.contentWindow.postMessage(a,b[c]);
进入第二个文件，找到代码： this.a.contentWindow.postMessage(a,b[c]);
and replace it with:
并将其替换为：
if(this._skiped){
this.a.contentWindow.postMessage(a,b[c]);
}
this._skiped = true;
Of course, you can concatenate into one file - will be more efficient. This is not a perfect solution, but it's works!
当然，您可以连接到一个文件中 - 效率会更高。这不是一个完美的解决方案，但它有效！
My Source : yt_api-concat
我的来源：yt_api-concat
回答by Gregory Magarshak
Make sure you are loading from a URL such as:
确保从 URL 加载，例如：
Note the "origin" component, as well as "enablejsapi=1". The origin must match what your domain is, and then it will be whitelisted and work.
注意“origin”组件，以及“enablejsapi=1”。来源必须与您的域相匹配，然后它将被列入白名单并正常工作。
回答by Chaitanya Shah
Try using window.location.hreffor the url to match the window's origin.
尝试使用window.location.hrefurl 来匹配窗口的原点。
回答by ave
I got the same error. My mistake was that the enablejsapi=1parameter was not present in the iframesrc.
我得到了同样的错误。我的错误是该enablejsapi=1参数不存在于iframesrc 中。
回答by LukeSolar
You also get this message when you do not specify a targetOriginin calls to window.postMessage().
当您未在对 的调用中指定targetOrigin时，您也会收到此消息window.postMessage()。
In this example we post a message to the first iFrame and use *as target, which should allow communication to any targetOrigin.
在这个例子中，我们向第一个 iFrame 发送一条消息并*用作目标，这应该允许与任何 targetOrigin 进行通信。
window.frames[0].postMessage({
message : "Hi there",
command :"hi-there-command",
data : "Some Data"
}, '*')
回答by Roger Krueger
In my instance at least this seems to be a harmless "not ready" condition that the API retries until it succeeds.
至少在我的例子中，这似乎是一个无害的“未准备好”条件，即 API 会重试直到成功。
I get anywhere from two to nine of these (on my worst-case-tester, a 2009 FossilBook with 20 tabs open via cellular hotspot).... but then the video functions properly. Once it's running my postMessage-based calls to seekTo definitely work, haven't tested others.
我得到了其中的 2 到 9 个（在我的最坏情况测试仪上，2009 年 FossilBook 有 20 个通过蜂窝热点打开的选项卡）...但随后视频正常运行。一旦它运行我的基于 postMessage 的对 seekTo 的调用肯定有效，还没有测试其他人。
回答by KMX
There could be any of the following, but all of them lead into DOM not loaded before its accessed by the javascript.
可能有以下任何一种情况，但所有这些都会导致 DOM 在被 javascript 访问之前未加载。
So here is what you have to ensure before actually calling JS code: * Make sure the container has loaded before any javascript is called * Make sure the target URL is loaded in whatever container it has to
因此，在实际调用 JS 代码之前，您必须确保： * 确保在调用任何 javascript 之前已加载容器 * 确保目标 URL 已加载到它必须加载的任何容器中
I came across the similar issue but on my local when I am trying to have my Javascript run well before onLoad of the main page which causes the error message. I have fixed it by simply waiting for whole page to load and then call the required function.
我遇到了类似的问题，但在我的本地，当我试图在导致错误消息的主页的 onLoad 之前让我的 Javascript 运行良好时。我通过简单地等待整个页面加载然后调用所需的函数来修复它。
You could simply do this by adding a timeout function when page has loaded and call your onload event like:
您可以通过在页面加载时添加超时函数并调用您的 onload 事件来简单地做到这一点，例如：
window.onload = new function() { setTimeout(function() { // some onload event }, 10); }
window.onload = new function() { setTimeout(function() { // 一些 onload 事件 }, 10); }
that will ensure what you are trying will execute well after onLoad is trigger.
这将确保您正在尝试的内容在 onLoad 被触发后能够很好地执行。
