Youtube 嵌入：不安全的 JavaScript 尝试访问框架
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6346176/
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 embed: Unsafe JavaScript attempt to access frame
提问by George Armhold
We have a Wicket app with a page that includes an embedded Youtube video. The video embeds and plays fine, but apparently it causes the rest of the page to not render- it seems that the DOM elements coming afterthe embed simply don't show up on the page, despite being in the markup.
我们有一个 Wicket 应用程序，其中包含一个嵌入的 Youtube 视频页面。视频嵌入并播放良好，但显然它导致页面的其余部分无法呈现 - 似乎嵌入之后的DOM 元素根本没有显示在页面上，尽管在标记中。
Looking at the error console in Chrome reveals:
查看 Chrome 中的错误控制台显示：
Unsafe JavaScript attempt to access frame with URL http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashifrom frame with URL http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo=1. Domains, protocols and ports must match.
不安全的 JavaScript 尝试 从 URL http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo 的框架访问 URL http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi的框架 =1。域、协议和端口必须匹配。
I've googled this a fair amount, and people seem to be saying that it's innocuousand to ignore it. That just seems wrong, and in our case it actually breaks the page.
我在谷歌上搜索了相当多的内容，人们似乎在说它无害并忽略它。这似乎是错误的，在我们的例子中它实际上打破了页面。
If we change our app so that the video is embedded dynamically via an ajax callback (user clicks a Wicket AjaxLink) we still get the error in the console, but at least the page renders fully. Unfortunately this won't work for us, as we need the video to be loaded by default when the user first hits the page.
如果我们更改我们的应用程序，以便通过 ajax 回调（用户单击 Wicket AjaxLink）动态嵌入视频，我们仍然会在控制台中收到错误，但至少页面完全呈现。不幸的是，这对我们不起作用，因为我们需要在用户第一次点击页面时默认加载视频。
Edit: I should add that although the error message was taken from the Chrome console, the bug seems to affect every browser I've tried: Chrome, Safari and Firefox.
编辑：我应该补充一点，虽然错误消息是从 Chrome 控制台获取的，但该错误似乎影响了我尝试过的每个浏览器：Chrome、Safari 和 Firefox。
采纳答案by Andrew Curioso
The security error is unlikely to break your page. It looks like the error is happening from within the YouTube frame, which means that in the worst case the content of the frame will be messed up.
安全错误不太可能破坏您的页面。错误似乎是在 YouTube 框架内发生的，这意味着在最坏的情况下，框架的内容会被弄乱。
A frame/iframe from an external page cannot, under any circumstances effect the content of the parent document unless they are from the same domain and port number. It is one of the hard rules of browser security.
来自外部页面的框架/iframe 在任何情况下都不能影响父文档的内容，除非它们来自相同的域和端口号。这是浏览器安全的硬性规则之一。
The error must be elsewhere in your markup. Any chance of seeing some example markup?
错误必须在您的标记中的其他地方。有机会看到一些示例标记吗？
[edit]
[编辑]
The error could also be in the embed code markup. Or, if any script tags are included directly on the page (not in the iframe) it could be there.
错误也可能出现在嵌入代码标记中。或者，如果任何脚本标签直接包含在页面上（而不是在 iframe 中），它可能就在那里。
Usually when problems like this happens it is because of an unclosed tag somewhere but it could be Javascript as well.
通常，当发生这样的问题时，是因为某处未关闭标签，但也可能是 Javascript。
回答by Jonathan Torres
If you are having an issue resolving that JavaScript error, you can try using YouTube's old embed code. It's an option on every YouTube video once you click on embed. You will not have that error because it does not use iframes. The code would look something like this:
如果您在解决 JavaScript 错误时遇到问题，可以尝试使用 YouTube 的旧嵌入代码。单击嵌入后，它是每个 YouTube 视频上的一个选项。你不会有那个错误，因为它不使用 iframe。代码看起来像这样：
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Hope this helps.
希望这可以帮助。
回答by adriandhart
I voted for Jonathan Torres' answer, because his code stopped the Javascript warnings. However I then discovered errors when I validated the code.
我投票支持 Jonathan Torres 的回答，因为他的代码停止了 Javascript 警告。但是，当我验证代码时，我发现了错误。
So my answer is this...
所以我的回答是这样...
Tick the "Use old embed code" checkbox when using YouTube's embed code so you're not using the iframe.
使用 YouTube 的嵌入代码时，勾选“使用旧的嵌入代码”复选框，这样您就不会使用 iframe。
To make the code validate you need to add....
要使代码验证，您需要添加....
type="movie"
and
和
data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/"
to the OBJECTelement. Then make the PARAMelements self-closing (but not the EMBEDelement).
到OBJECT元素。然后使PARAM元素自闭合（但不是EMBED元素）。
This should make your YouTube code look like this...
这应该使您的 YouTube 代码看起来像这样...
<object width="560" height="315" type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
You then ought to get no Javascript warnings and your code should validate.
然后，您应该不会收到任何 Javascript 警告，并且您的代码应该经过验证。
回答by Salman A
The Unsafe JavaScript attempt to access frameerror has nothing to do with your page not rendering. Broken markup (e.g. a missing </iframe>) is the most probable reason.
在不安全的JavaScript尝试访问帧错误无关，与你的页面不渲染。损坏的标记（例如丢失</iframe>）是最可能的原因。
As for the Unsafe JavaScript attempt to access frameerror, you have a few options:
对于Unsafe JavaScript 尝试访问帧错误，您有几个选择：
Easiest solution is to use the IFrame Player APIinstead of manually adding iframe tags. The API is a piece of JavaScript that generatesthe iframe tag for you and adds the parameters that will (or should) eliminate the frame access error. Here are the instructions for using IFrame Player API to load a player.
The manual solution is to build the
<iframe>tags and append the&origin=http://example.comparameter to the URLs. Quote:
最简单的解决方案是使用IFrame Player API而不是手动添加 iframe 标签。API 是一段 JavaScript，它为您生成iframe 标记并添加将（或应该）消除框架访问错误的参数。以下是使用IFrame Player API 加载播放器的说明。
手动解决方案是构建
<iframe>标记并将&origin=http://example.com参数附加到 URL。引用：
As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme (http:// or https://) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hiHymaning control of your YouTube player.
作为额外的安全措施，您还应该在 URL 中包含 origin 参数，指定 URL 方案（http:// 或 https://）和主机页面的完整域作为参数值。虽然 origin 是可选的，但包括它可以防止恶意的第三方 JavaScript 被注入您的页面并劫持您的 YouTube 播放器的控制权。
回答by pachermann
for me it worked by using the code here: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
对我来说，它通过使用这里的代码起作用：https: //developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
the lines i fixed see the words market with 2 asterix ** code:
我修复的行看到带有 2 个星号 **代码的“市场”字样 ：
from this:
由此：
var tag = document.createElement('script');
tag.src = "**http://www.youtube.com/player_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubePlayerAPIReady()** {
var ids = $('div.video div');
for(var i=0; i < ids.length; i++) {
players.push(new YT.Player('**yt**'+i, {
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
}
to this:
对此：
var tag = document.createElement('script');
tag.src = "**https://www.youtube.com/iframe_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubeIframeAPIReady()** {
var ids = $('div.video div');
for(var i=0; i < ids.length; i++) {
players.push(new YT.Player('**player**'+i, {
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
}
