javascript Youtube API - 无法在“DOMWindow”上执行“postMessage”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47833687/
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
Youtube API - Failed to execute 'postMessage' on 'DOMWindow'
提问by HenryM
I'm trying to start a youtube video when a modal is opened and not progress to the next page until it is completed.
我正在尝试在打开模态时启动 youtube 视频，并且在完成之前不会进入下一页。
My script below works in Chrome but produces this error in Firefox and Edge.
我下面的脚本在 Chrome 中工作，但在 Firefox 和 Edge 中产生此错误。
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://example.com').
无法在“DOMWindow”上执行“postMessage”：提供的目标源（“ https://www.youtube.com”）与收件人窗口的源（“ http://example.com”）不匹配。
Javascript
Javascript
<script src="http://www.youtube.com/player_api"></script>
<script>
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('Thank you for watching - Click OK to see your results');
}
}
</script>
<script language="JavaScript">
$(document).ready(function() {
$('#post_form').submit(function() { // catch the form's submit event
$("#adModal").modal("show");
var time = $('#adtime').val();
//startCountdownTimer(time) ;
// create youtube player
var player;
player = new YT.Player('player', {
width: '640',
height: '390',
videoId: 'EF-jwIv1w68',
host: 'http://www.youtube.com',
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
});
});
</script>
I have reviewed this question/answerbut cannot seem to get it working with my code by amending the http / https.
我已经查看了这个问题/答案，但似乎无法通过修改 http/https 使其与我的代码一起使用。
采纳答案by dferenc
I think that the error message is a little bit misleading, as it has nothing to do with your actual host, but is more about how resources from youtube.com are referenced on the page.
我认为该错误消息有点误导，因为它与您的实际主机无关，但更多的是关于如何在页面上引用来自 youtube.com 的资源。
There are two things I would suggest in order to get rid of this error message. (At least these were working in my case.)
为了摆脱此错误消息，我建议做两件事。（至少这些对我来说是有效的。）
First and foremost you should reference the IFrame Player APIscript via https. When called with http, YouTube redirects that script request automatically to it's httpscounterpart, so if you reference the script directly from https, that eliminates this extra redirect. But most importantly, in case your production environment ever goes to https, it won't load that script over http, but will throw a “Blocked loading mixed active content” error.
首先，您应该IFrame Player API通过https. 当使用http调用时，YouTube 会自动将该脚本请求重定向到它的https副本，因此如果您直接从https引用该脚本，就可以消除这种额外的重定向。但最重要的是，如果您的生产环境转到https，它不会通过http加载该脚本，而是会抛出“阻止加载混合活动内容”错误。
According to my tests this change alone would already magically solve the issue. However in case you would prefer to leave that on http, there is this other thing:
根据我的测试，仅此更改就已经神奇地解决了问题。但是，如果您希望将其保留在http 上，还有另一件事：
Reading through the Loading a Video Playerand the Supported Parameterssections of the API docs, there is no mention about the hostparameter at all. In fact when I removed that line from the Player parameters I didn't receive the error message any more. Also, interestingly, when I set hostliterally to http://www.example.com, the error message reads: The target origin provided (‘http://www.example.com') does not match the recipient window's origin ….) Therefore I think the hostparameter should not be set by the client.
通读API 文档的加载视频播放器和支持的参数部分，根本没有提及该host参数。事实上，当我从 Player 参数中删除该行时，我不再收到错误消息。此外，有趣的是，当我host从字面上设置为 时http://www.example.com，错误消息显示为：The target origin provided (‘http://www.example.com') does not match the recipient window's origin ….) 因此我认为该host参数不应由客户端设置。
Sidenote: If you have a look at the contents of https://www.youtube.com/player_api, you will see this statement: var YTConfig = {'host': 'http://www.youtube.com'};. To me it means that http://www.youtube.comis some kind of a default for hostanyways, so even if you go and set it in the client code, you could try to set it to https://www.youtube.com.
旁注：如果您查看 的内容https://www.youtube.com/player_api，您会看到这样的声明：var YTConfig = {'host': 'http://www.youtube.com'};。对我来说，这意味着无论如何这http://www.youtube.com是某种默认值host，因此即使您在客户端代码中设置它，您也可以尝试将其设置为https://www.youtube.com.
Long story short, try to use <script src="https://www.youtube.com/player_api"></script>and comment out the host. This is my 2 cents.
长话短说，尝试使用<script src="https://www.youtube.com/player_api"></script>和注释掉host. 这是我的 2 美分。
回答by HenryM
The solution was simple, although I do not know why. By removing the api from the modal it worked fine. Within the modal it wouldn't.
解决方案很简单，虽然我不知道为什么。通过从模式中删除 api，它工作正常。在模态中它不会。
回答by Jason at ServoCity
In my case (similar to the selected answer here Youtube API error - Failed to execute 'postMessage' on 'DOMWindow':) It came down the to the fact that the video was not visible on the page at the time Player was instantiated.
在我的情况下（类似于此处选择的答案Youtube API 错误 - 无法在“DOMWindow”上执行“postMessage”：）归结为在实例化播放器时视频在页面上不可见的事实。
回答by Piyush
In my Case "widget_referrer" was missing. If nothing works for you, try widget_referrer :window.location.href
在我的案例中，缺少“widget_referrer”。如果没有任何效果，请尝试 widget_referrer :window.location.href
other possible properties one might miss are
人们可能会错过的其他可能的属性是
origin:window.location.href, enablejsapi:1,
原点：window.location.href，启用jsapi：1，
回答by Awsme Sandy
My website is configured without the wwwand the youtube link was with wwwthat's why i was getting this error.
Try to make it similar, I removed wwwfrom my youtube, and it works.
我的网站配置没有wwwyoutube 链接，www这就是我收到此错误的原因。试着让它相似，我www从我的 youtube 上删除了，它可以工作。
