iframe和外部网站

Question

所以我有这个代码:

<iframe id="theFrame" src="http://localhost" style="width:100%;" frameborder="0">
</iframe>

和iframe中加载的localhost网站就好了..

但是当我将src更改为外部网站时

<iframe id="theFrame" src="http://www.youtube.com" style="width:100%;" frameborder="0">
</iframe>

该网站没有加载.

我做错了什么？我知道您可以在iframe中使用外部网站,因为Google图片搜索会这样做...

如何让我的iframe中的外部网站工作？

Answer 1

外部网站之所以如下:

1. youtube.com
2. google.com
3. stackoverflow.com
4. 等等

是不加载在你的框架,是因为他们有意利用某种框架杀手.

示例(使用jQuery):

<style> html{display:none;} </style>
<script type="text/javascript">
    $(document).ready(function () {
        if(window.self == window.top) {
            document.documentElement.style.display = 'block'; }
        else {
       window.top.location = window.self.location; }
    });
</script>

建议阅读:

• Framekiller(维基百科)
• 打破坚韧的FRAME杀手

Answer 2

如果您运行下面的代码片段：

<iframe src="https://www.youtube.com"></iframe>

然后再看开发工具，会报错：

拒绝在框架中显示“ https://www.youtube.com/ ”，因为它将“X-Frame-Options”设置为“sameorigin”。

这是因为您尝试访问的站点使用X-Frame-Options标头限制嵌入（通过iframe、frame、embed、object）到同一来源。所以 youtube.com 可以很好地加载带有 youtube.com 页面的 iframe，但没有其他人可以。只有嵌入式站点的站点管理员才能更改该设置。

如果您拥有要嵌入的站点的管理员，则可以将主机站点列入白名单：

X-Frame-Options: allow-from https://my-host-site.com/

这必须由您尝试嵌入的页面的服务器作为 HTTP 标头发送。它不会作为metaHTML 中的标签工作head。这就是浏览器如何知道您嵌入的站点 确定托管站点以在iframe.

Answer 3

您可能遇到了同样的问题，很可能是iframe被X-frame-options阻止或被Deny属性阻止。例如，如果您从外部来源访问facebook，它将返回带有Google chrome的DENY响应

Answer 4

这似乎是 YouTube 独有的问题；src="http://www.mozilla.org" 在你的代码中为我工作。如果您想在 iframe 中显示 YouTube 视频，他们可能会要求您在视频页面上使用“嵌入”选项？