Youtube嵌入：不安全的JavaScript尝试访问帧

我们有一个Wicket应用程序，它的页面包含一个嵌入式Youtube视频。视频嵌入并播放得很好，但显然它会导致页面的其余部分无法呈现-嵌入之后的DOM元素似乎根本不会显示在页面上，尽管它们位于标记中

查看Chrome中的错误控制台可以发现：

不安全的JavaScript试图访问 带URL的框架 从带有URL的框架 . 域、协议和端口必须 匹配

我在谷歌上搜索了相当多的内容，人们似乎都在说这些，而忽视了这些。这似乎是错误的，在我们的例子中，它实际上打破了这一页

如果我们更改应用程序，使视频通过ajax回调动态嵌入（用户单击Wicket AjaxLink），我们仍然会在控制台中看到错误，但至少页面完全呈现。不幸的是，这对我们不起作用，因为我们需要在用户第一次点击页面时默认加载视频

---

编辑：我应该补充一点，尽管错误消息来自Chrome控制台，但该漏洞似乎影响了我尝试过的所有浏览器：Chrome、Safari和Firefox。

安全错误不太可能破坏您的页面。看起来错误发生在YouTube框架内，这意味着在最坏的情况下，框架的内容将被弄乱

在任何情况下，来自外部页面的frame/iframe都不能影响父文档的内容，除非它们来自相同的域和端口号。这是浏览器安全的硬规则之一

错误必须在标记的其他位置。有没有可能看到一些示例标记

[编辑]

错误也可能出现在嵌入代码标记中。或者，如果页面上直接包含任何脚本标记（不在iframe中），那么它可能就在那里

---

通常当出现这种问题时，是因为某个地方的标签未关闭，但也可能是Javascript。

如果您在解决Javascript错误时遇到问题，可以尝试使用YouTube的旧嵌入代码。一旦你点击embed，这是每个YouTube视频上的一个选项。您将不会出现该错误，因为它不使用iframe。代码如下所示：

<object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;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&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

希望这有帮助

不安全的JavaScript尝试访问帧错误与页面未呈现无关。最可能的原因是标记损坏（例如缺少

）

对于不安全的JavaScript尝试访问帧错误，您有几个选项：

最简单的解决方案是使用IFrame播放器API，而不是手动添加IFrame标记。API是一段JavaScript，它为您生成iframe标记，并添加将（或应该）消除帧访问错误的参数。以下是使用说明

手动解决方案是构建

标记并附加

&源代码=http://example.com

参数设置到URL。引述：

作为一个额外的安全措施，您还应该包括源代码 参数，指定URL方案（http://或https://） 和主机页的完整域作为参数值。而起源 是可选的，包括防止恶意第三方攻击 JavaScript被注入到您的页面并劫持您的 YouTube播放器

---

我投票支持乔纳森·托雷斯的答案，因为他的代码阻止了Javascript警告。然而，我在验证代码时发现了错误

所以我的答案是

在使用YouTube的嵌入代码时，勾选“使用旧的嵌入代码”复选框，这样您就不会使用iframe

要使代码有效，您需要添加

type="movie"

及

到对象元素。然后使PARAM元素自动关闭（但不是嵌入元素）

这会让你的YouTube代码看起来像这样

<object width="560" height="315" type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

---

然后，您应该不会收到任何Javascript警告，并且您的代码应该进行验证。

对于我来说，使用下面的代码是有效的：

我固定的行看到带2个asterix**代码的单词market：

来自此：

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
                }
            }));
        }

      }

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
            }
        }));
    }

  }

var tag=document.createElement（'script'）；
tag.src=”**http://www.youtube.com/player_api**";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var players=新数组（）；
函数**onyoutublayerapiready（）**{
变量ID=$（'div.video div'）；
对于（变量i=0；i

对此：

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
                }
            }));
        }

      }

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
            }
        }));
    }

  }

var tag=document.createElement（'script'）；
tag.src=”**https://www.youtube.com/iframe_api**";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var players=新数组（）；
函数**onyoutubeiframeapiredy（）**{
变量ID=$（'div.video div'）；
对于（变量i=0；i

这听起来很糟糕，因为它太不直观了。但是，iFrame不能内联关闭，并且仍然与大多数浏览器兼容。因此，你需要使用

>

而不是

哇，我不能相信w