Question

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

查看Chrome中的错误控制台显示：

不安全的JavaScript尝试访问带URL的框架 http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashi 来自带框架的框架 http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo=1。域，协议和端口必须匹配。

我用Google搜索了相当数量，人们似乎在说it's innocuous并忽略它。这似乎是错的，在我们的例子中，它实际上打破了页面。

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

修改：我应该补充一点，虽然错误消息来自Chrome控制台，但该错误似乎会影响我尝试过的每个浏览器：Chrome，Safari和Firefox。

Answer 1

安全错误不太可能破坏您的网页。看起来错误是在YouTube框架内发生的，这意味着在最坏的情况下，框架的内容会搞砸。

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

错误必须在您的标记中的其他位置。有没有机会看到一些示例标记？

[编辑]

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

通常当这样的问题发生时，由于某个地方有一个未封闭的标签，但它也可能是Javascript。

Answer 2

如果您在解决该JavaScript错误时遇到问题，可以尝试使用YouTube的旧嵌入代码。点击嵌入后，每个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>

希望这会有所帮助。

Answer 3

我投票支持Jonathan Torres的回答，因为他的代码停止了Javascript警告。但是，当我验证代码时，我发现了错误。

所以我的答案就是这个......

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

要使代码验证，您需要添加....

type="movie"

和

data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/"

到 OBJECT 元素。然后使 PARAM 元素自动关闭（但不是 EMBED 元素）。

这应该会使您的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警告，并且您的代码应该验证。

Answer 4

不安全JavaScript尝试访问框架错误与您的网页无法呈现无关。破碎的标记（例如缺少</iframe>）是最可能的原因。

至于不安全的JavaScript尝试访问框架错误，您有几个选择：

最简单的解决方案是使用 IFrame播放器API ，而不是手动添加iframe代码。 API是为您生成 iframe标记的JavaScript，并添加将（或应该）消除帧访问错误的参数。以下是使用IFrame Player API to load a player。
手动解决方案是构建<iframe>代码并将&origin=http://example.com参数附加到网址。引用：

作为额外的安全措施，您还应该包括原产地 URL的参数，指定URL方案（http：//或https：//）和主页的完整域作为参数值。虽然起源是可选的，包括它可以防止恶意的第三方 JavaScript被注入您的页面并劫持您的控件 YouTube播放器。

Answer 5

对我而言，它使用此处的代码： https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

我修复的行看到带有2个星号的市场** 代码：

来自：

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

  }

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

5 个答案: