Html iframe 和外部网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8284217/
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
iframe and external website
提问by kamikaze_pilot
So I have this code:
所以我有这个代码：
<iframe id="theFrame" src="http://localhost" style="width:100%;" frameborder="0">
</iframe>
and the localhost site loaded in the iframe just fine..
并且 localhost 站点加载到 iframe 中就好了..
but then when I change the src to an external website
但是当我将 src 更改为外部网站时
<iframe id="theFrame" src="http://www.youtube.com" style="width:100%;" frameborder="0">
</iframe>
The website did not load.
该网站未加载。
What did I do wrong? I know that you can use external websites in an iframe since Google Image Search does so...
我做错了什么？我知道你可以在 iframe 中使用外部网站，因为谷歌图片搜索这样做......
How can I get external sites to work in my iframe?
如何让外部网站在我的 iframe 中工作？
采纳答案by OXiGEN
It appears to be a youtube-only problem; src="http://www.mozilla.org" works for me in your code. If you want to display youtube videos in iframes, they'll probably want you to use "embed" option on the video page?
这似乎是一个仅限 youtube 的问题；src="http://www.mozilla.org" 在你的代码中对我有用。如果您想在 iframe 中显示 youtube 视频，他们可能希望您在视频页面上使用“嵌入”选项？
回答by JohnB
The reason why external websites such as:
外部网站的原因如：
- youtube.com
- google.com
- stackoverflow.com
- etc.
- youtube.com
- google.com
- stackoverflow.com
- 等等。
are not loadingin your frame, is because they are intentionally leveraging some sort of Frame Killer.
是不加载在你的框架，是因为他们有意利用某种框架杀手。
Example (uses jQuery):
示例（使用 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>
Suggested reading:
推荐阅读：
回答by Zackery Painter
You are probably experiencing the same issues I am having, Most likely the iframe is being blocked by the X-frame-options or being blocked by the Deny property. For example if you access facebook from an outside source it will come back with a DENY response in google chrome
您可能遇到了与我相同的问题，很可能 iframe 被 X-frame-options 阻止或被 Deny 属性阻止。例如，如果您从外部访问 facebook，它将在谷歌浏览器中返回拒绝响应
回答by OXiGEN
If you run the code snippet below:
如果您运行下面的代码片段：
<iframe src="https://www.youtube.com"></iframe>Then look at dev tools, it will throw the error:
然后再看开发工具，会报错：
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
拒绝在框架中显示“ https://www.youtube.com/”，因为它将“X-Frame-Options”设置为“sameorigin”。
This is because the site you are trying to access limits embedding (via iframe, frame, embed, object) to the same origin using the X-Frame-Optionsheader. So youtube.com can load iframes with youtube.com pages just fine, but nobody else can. Only site admins for the embedded site can change that setting.
这是因为您尝试访问的站点使用X-Frame-Options标头限制嵌入（通过iframe、frame、embed、object）到同一来源。所以 youtube.com 可以很好地加载带有 youtube.com 页面的 iframe，但没有其他人可以。只有嵌入式站点的站点管理员才能更改该设置。
If you have admin for the site you are embedding, you can whitelist the the host site:
如果您拥有要嵌入的站点的管理员，则可以将主机站点列入白名单：
X-Frame-Options: allow-from https://my-host-site.com/
X-Frame-Options: allow-from https://my-host-site.com/
This has to be sent as a HTTP Header by the server of the page you are trying to embed. It will not work as a metatag inside the HTML head. This is how the browser knows the site you are embedding ok'd the site that is hosting to show the page in the iframe.
这必须由您尝试嵌入的页面的服务器作为 HTTP 标头发送。它不会作为metaHTML 中的标签工作head。这就是浏览器如何知道您嵌入的站点 确定托管站点以在iframe.
