Question

在我的localhost上，我使用以下JavaScript创建iframe src，并将其添加到文档中：

$('#preview').html('<iframe src="http://google.com/"></iframe>');

iframe显示但不显示内容。在萤火虫中，它只是：

<iframe src="http://google.com/">
    <html>
        <head></head>
        <body></body>
    </html>
</iframe>

当我在控制台上执行$('iframe').attr('src','http://google.com/');时，浏览器会加载（说“等待google.com ...”），然后似乎刷新了iframe的内容。但同样，它是空的。

但是，如果我将其设置为本地页面，则会加载内容。

这是因为相同的原产地政策吗？我不太了解它。我做了一些谷歌搜索，我很困惑，因为有些网站说可以包含一个不属于你自己的域的src的iframe，有些人说这是不可能的。

顺便说一句，因为我还在localhost上测试，如果我把它上传到某个服务器上，这会有用吗？（但iframe的src仍将在不同的域中）

帮助？

Answer 1

如果您检查了浏览器的错误控制台，则会看到以下消息：

拒绝显示文档，因为X-Frame-Options禁止显示。

因此，这不是您的错误，而是Google的故意行为。

X-Frame-Options的两个选项是：

deny - 框架内无渲染，
sameorigin - 如果原因不匹配则无法呈现

参考文献：

X-Frame-Options response headers, at MDN。
X-Frame-Options at Wikipedia。
Overcoming "Display forbidden by X-Frame-Options"（此处为Stack Overflow）。

Answer 2

是的，因为相同的原始政策，代码被禁止。阅读here

假设您拥有域http://www.example.com，那么当您通过iframe调用网页时，您可能会有以下结果：

Compared URL                               Outcome  Reason
---------------------------------------------------------------------------------------------
http://www.example.com/dir/page.html       Success  Same protocol and host
http://www.example.com/dir2/other.html     Success  Same protocol and host
http://www.example.com:81/dir2/other.html  Failure  Same protocol and host but different port
https://www.example.com/dir2/other.html    Failure  Different protocol
http://en.example.com/dir2/other.html      Failure  Different host
http://example.com/dir2/other.html         Failure  Different host (exact match required)
http://v2.www.example.com/dir2/other.html  Failure  Different host (exact match required)

现在，您正在调用google.com，这是一个跨域问题。要解决此类问题，JSONP可以帮助您解决问题。它使用<script>的开放脚本策略，从跨域检索JSON。

动态创建的iframe的内容为空

2 个答案: