javascript 动态创建的 iframe 内容为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10366646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
content of dynamically created iframe is empty
提问by Obay
On my localhost, I am using the following JavaScript to create an iframewith src, and add it to the document:
在我的本地主机上，我使用以下 JavaScript 创建一个iframewith src，并将其添加到文档中：
$('#preview').html('<iframe src="http://google.com/"></iframe>');
The iframe shows but not the content. In firebug, it's just:
iframe 显示但不显示内容。在萤火虫中，它只是：
<iframe src="http://google.com/">
<html>
<head></head>
<body></body>
</html>
</iframe>
When I execute $('iframe').attr('src','http://google.com/');on the console, the browser loads (says "Waiting for google.com..."), then seems to refresh the content of the iframe. But again, it's empty.
当我$('iframe').attr('src','http://google.com/');在控制台上执行时，浏览器加载（说“等待 google.com...”），然后似乎刷新 iframe 的内容。但是，它又是空的。
If I set it to a local page, though, the content is loaded.
但是，如果我将其设置为本地页面，则会加载内容。
Is this because of the same origin policy? I'm not so informed about it. I did some googling and I'm confused because some sites say that it's okay to include an iframe with src that doesn't belong to your own domain, and some say it's not possible.
这是因为同源政策吗？我不是很了解它。我做了一些谷歌搜索，但我很困惑，因为有些网站说可以包含不属于您自己域的 src 的 iframe，而有些网站说这是不可能的。
By the way, since I'm still testing on localhost, would this work if I uploaded this to a server somewhere? (but src of iframe will still be in a different domain)
顺便说一句，由于我仍在 localhost 上进行测试，如果我将其上传到某个服务器，这会起作用吗？（但 iframe 的 src 仍将在不同的域中）
Help?
帮助？
回答by David says reinstate Monica
If you'd checked your browser's error console, you'd have seen this message:
如果您检查过浏览器的错误控制台，就会看到以下消息：
Refused to display document because display forbidden by X-Frame-Options.
拒绝显示文档，因为 X-Frame-Options 禁止显示。
So, this isn't an error on your part, but a deliberate action on the part of Google.
因此，这不是您的错误，而是 Google 的故意行为。
The two options for the X-Frame-Optionsare:
的两个选项X-Frame-Options是：
deny- no rendering within a frame, andsameorigin- no rendering if origin mismatch
deny- 帧内没有渲染，以及sameorigin- 如果原点不匹配则无渲染
References:
参考：
X-Frame-Optionsresponse headers, at MDN.X-Frame-Optionsat Wikipedia.- Overcoming "Display forbidden by X-Frame-Options"(here on Stack Overflow).
X-Frame-Options响应头，在 MDN。X-Frame-Options在维基百科。- 克服“X-Frame-Options 禁止显示”（在 Stack Overflow 上）。
回答by ashutosh
Yes the code is forbidden because of same origin policy. Read here
是的，由于同源政策，该代码被禁止。在这里阅读
Suppose you own the domain http://www.example.comthen you can probably have following results, when you call pages through iframes:
假设您拥有域，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)
Now, you are calling google.com, which is a cross domain issue upon you. To get around such a problem, JSONPcan help you out. It uses open script policy for <script>, to retrieve JSON from cross domains.
现在，您正在调用 google.com，这是一个跨域问题。为了解决这样的问题，JSONP可以帮助您。它使用 , 的开放脚本策略<script>从跨域检索 JSON。
