使用 iframe 嵌入 Youtube 视频会给出“不安全的 JavaScript 尝试......”答案

【问题标题】：Embedding Youtube video using iframe gives "Unsafe JavaScript attempt ... "使用 iframe 嵌入 Youtube 视频会给出“不安全的 JavaScript 尝试......”
【发布时间】：2012-11-17 11:52:07
【问题描述】：

我正在尝试使用此代码嵌入 YouTube 视频：

<iframe width="425" height="319" frameborder="0" wmode="Opaque"allowfullscreen=""
      src="http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent">
</iframe>

虽然它工作正常，但它在控制台中给出了这个错误：

Chrome 版本 22.0.1229.94：

不安全的 JavaScript 尝试使用 URL http://example.com/ 访问框架
来自 URL http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent 的框架。
域、协议和端口必须匹配。

Firefox 17.0 版：

错误：访问属性“toString”的权限被拒绝

我四处搜索，但发现这可能是 YouTube 的问题，他们应该解决它，

问题是：我怎样才能摆脱这个错误？（无论如何，甚至通过压制它。）

【问题讨论】：

这有点猜测，所以我不会将其发布为答案，但我怀疑 youtube 内容中的脚本正在尝试查看 iframe 的参数以获取参数像 wmode 和 allowfullscreen。您的浏览器正确地将其视为跨站点脚本尝试，出于安全原因，这是不允许的。如果您将 youtube 所需的所有参数嵌入到 URL 查询字符串中，那么您可能会阻止它这样做。
还忍不住注意到 iframe 中有 wmode=opaque，URL 中有 wmode=transparent。
我读了很多关于为什么会发生这种情况的意见，很多人说这是因为 iframe 中加载的 Youtube API 试图访问违反安全标准的父元素，并且它已经被报告为错误，但我在这里更关心的是如何阻止此错误出现在控制台中，而不仅仅是等待 Youtube 开发人员解决它。关于 wmode，我没有注意到 :)，谢谢
我建议（猜测）的解决方案在我评论的最后一行 - 将 youtube 所需的所有参数嵌入到 URL 查询字符串中 - 值得一试。
我试过了，还是报错

标签： javascript iframe youtube youtube-iframe-api

【解决方案1】：

你无法阻止它，至少在我所知道的任何方面都无法阻止（而且我已经尝试了很多）。 iframe 目标中有一个脚本试图访问您的文档，可能正在寻找它可以调用以启用 API 的全局函数。

另一件事是即使使用自己的iframe API：http://jsbin.com/izabed/1/edit，错误仍然存在

这并没有什么坏处，您的视频可以正常播放。但如果你在控制台中运行它，它看起来有点大胆。他们可能应该将这个作为参数包含在内，起初我以为这是origin参数的想法，但它没有任何区别。

还值得注意的是，他们自己的 demo 显示相同的错误（和其他错误）。此外，如果您使用embed 标签而不是 iframe，它不会显示任何错误。

因此，您可以执行以下操作来防止大多数桌面浏览器出现错误：

if(haveflash) {
    // use <embed>
} else {
    // use iframe
}

更新

大多数浏览器不再支持 Flash，nor does Adobe。不幸的是，这意味着使用<embed> 不再是一个可行的选择。

【讨论】：

谢谢大卫，我知道这不是问题的直接答案，但在搜索了很多替代品后，我得到了很多发现，你在答案中总结了它们，给出了迄今为止最合适的解决方案跨度>
+1 表示“你无法阻止它”。这绝对是直接的答案，而不是写关于跨域安全等的文章

【解决方案2】：

既然只能使用 CSS，为什么还要使用 Javascript？它每次都有效。您甚至可以将任何视频合并到响应式滑块中。

或者直接访问：http://embedresponsively.com/

<style>
.embed-container 
{ 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
</style>

<div class='embed-container'>

<iframe src='https://www.youtube.com/watch?v=tntOCGkgt98' frameborder='0' allowfullscreen>
</iframe>
</div>

【讨论】：

感谢提示，但它甚至与问题有什么关系！ :)
一开始我没有使用 javascript 来加载视频，我只是使用了 iframe，就像你一样，但是错误是从 iframe 中加载的代码显示出来的，而不是我的

【解决方案3】：

只需添加?html5=1 即可防止出现此错误。（切换到 HTML5 播放器）

【讨论】：

【解决方案4】：

将讨论从 cmets 转移到这个答案。简而言之，问题是不允许跨域 JS 对象访问，在您的情况下，youtube.com 上的脚本正试图对父页面执行此操作。

如果您只想显示 youtube 视频，可以使用 <embed> 标签代替。

【讨论】：

谢谢，我知道它会起作用，但在我的情况下更改为的问题是：1-我正在处理的代码与其他领域相结合，需要更多时间重构（我现在没有），2-最重要的是我们仍然需要使用 Iframe API 来支持非 Flash 浏览器

【解决方案5】：

它是什么浏览器？当我尝试在此页面中使用 Firefox 中的 JavaScript 附加 iframe 时，不会出现错误/警告。

【讨论】：

chrome & firefox，这不是一般的iframe问题，它与iframe中加载的Youtube页面有关，尝试Youtube iframe会出现错误
我附加的 iframe 的 src 与您的示例相同。此外，iframe 允许属于不同的域。你可以试试这段代码：var iframe = document.createElement('iframe'); iframe.setAttribute('src' , 'http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent'); document.body.appendChild(iframe); 看看错误是否仍然出现？
是的，它仍然出现在 firefox 和 chrome 的控制台中，即使将代码放在只包含此代码或仅包含问题 iframe 的空 html 页面中
顺便说一句，我之前没有写过firefox的错误，因为它不像chrome的错误那样清楚，firefox的错误是：“错误：访问属性'toString'的权限被拒绝”
你为什么要通过 iframe 来做，而不是标签？