Youtube嵌入：不安全的JavaScript尝试访问框架-Java 学习之路

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

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

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

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

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

Edit ：我应该补充一点，虽然错误消息是从Chrome控制台获取的，但这个错误似乎会影响我尝试的每个浏览器：Chrome，Safari和Firefox .

5 回答

5

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

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

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

[编辑]

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

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

回复于 2024-04-26T05:55:01+08:00

如果您在解决该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>

希望这可以帮助 .

回复于 2024-04-26T05:55:01+08:00

我投票支持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警告，你的代码应该验证 .

回复于 2024-04-26T05:55:01+08:00

24
不安全JavaScript尝试访问帧错误与您的页面无法呈现无关 . 破碎的标记（例如缺失的 </iframe> ）是最可能的原因 .

至于不安全的JavaScript尝试访问帧错误，您有几个选项：
- 最简单的解决方案是使用 IFrame Player API 而不是手动添加iframe标记 . API是一段JavaScript，它为您生成iframe标记，并添加将（或应该）消除帧访问错误的参数 . 以下是使用IFrame Player API to load a player的说明 .
- 手动解决方案是构建 <iframe> 标记并将 &origin=http://example.com 参数附加到URL . 引用：
作为额外的安全措施，您还应该将origin参数包含在URL中，指定URL方案（http：//或https：//）和主页的完整域作为参数值 . 虽然origin是可选的，但包括它可以防止恶意的第三方JavaScript被注入您的页面并劫持您的YouTube播放器 .
回复于 2024-04-26T05:55:01+08:00

对我来说，它使用这里的代码工作：https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

我固定的线条看到市场上有2个asterix ** code ：

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

  }

回复于 2024-04-26T05:55:01+08:00

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

5 回答

相关问题