Html 如何在 iframe 中显示 google.com？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8700636/
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
How to show google.com in an iframe?
提问by Bala
I am trying to put google.com into an iframe on my website, this works with many other websites including yahoo. But it does not work with google as it just shows a blank iframe. Why does it not render? Are there any tricks to do that?
我正在尝试将 google.com 放入我网站上的 iframe，这适用于包括雅虎在内的许多其他网站。但它不适用于谷歌，因为它只显示一个空白的 iframe。为什么不渲染？有什么技巧可以做到这一点吗？
I have tried it in an usual way to show a website in an iframe like this:
我已经尝试过以通常的方式在 iframe 中显示网站，如下所示：
<iframe name="I1" id="if1" width="100%"
height="254" style="visibility:visible"
src="http://www.google.com"></iframe>
The google.com page does not render in the iframe, it's just blank. What is going on?
google.com 页面不会在 iframe 中呈现，它只是空白。到底是怎么回事？
采纳答案by Andreas Koch
The reason for this is, that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.
这样做的原因是，Google 正在发送“X-Frame-Options: SAMEORIGIN”响应标头。此选项可防止浏览器显示与父页面不在同一域中的 iFrame。
See: Mozilla Developer Network - The X-Frame-Options response header
回答by ijse
IT IS NOT IMPOSSIBLE.
Use a reverse proxy server to handle the Different-Origin-Problem. I used to using Nginx with proxy_passto change the url of page. you can have a try.
这是不可能的。
使用反向代理服务器来处理不同来源的问题。我曾经使用 Nginx withproxy_pass来更改页面的 url。你可以试试。
Another way is to write a simple proxy page runs on server by yourself, just request from Google and output the result to the client.
另一种方法是自己写一个简单的代理页面运行在服务器上，只需要从谷歌请求并将结果输出到客户端。
回答by ScottyG
As it has been outlined here, because Google is sending an "X-Frame-Options: SAMEORIGIN" response header you cannot simply set the src to "http://www.google.com" in a iframe.
正如此处概述的那样，由于 Google 正在发送“X-Frame-Options: SAMEORIGIN”响应标头，因此您不能简单地在 iframe中将 src 设置为“ http://www.google.com”。
If you want to embed Google into an iframe you can do what sudopeople suggested in a comment above and use a Google custom search link like the following. This worked great for me (left 'q=' blank to start with blank search).
如果您想将 Google 嵌入到 iframe 中，您可以按照 sudopeople 在上面评论中的建议进行操作，并使用如下所示的 Google 自定义搜索链接。这对我很有用（将 'q=' 留空以开始空白搜索）。
<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>
EDIT:
编辑：
This answer no longer works. For information, and instructions on how to replace an iframe search with a google custom search element check out: https://support.google.com/customsearch/answer/2641279
这个答案不再有效。有关如何使用 google 自定义搜索元素替换 iframe 搜索的信息和说明，请查看：https: //support.google.com/customsearch/answer/2641279
回答by Netham
You can bypass X-Frame-Options in an using YQL.
您可以在使用 YQL 时绕过 X-Frame-Options。
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
else if (data && data.error && data.error.description) loadHTML(data.error.description);
else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
url = src;
var script = document.createElement('script');
script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
document.body.appendChild(script);
};
var loadHTML = function (html) {
iframe.src = 'about:blank';
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
iframe.contentWindow.document.close();
}
loadURL(iframe.src);
<iframe src="http://www.google.co.in" width="500" height="300"></iframe>
Run it here: http://jsfiddle.net/2gou4yen/
在这里运行：http: //jsfiddle.net/2gou4yen/
Code from here: How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?
回答by WalterV
You can solve using Google CSE(Custom Searche Engine), which can be easily inserted into an iframe. You can create your own search engine, that search selected sites or also in entire Google's database.
您可以使用可以轻松插入 iframe 的Google CSE（自定义搜索引擎）来解决。您可以创建自己的搜索引擎，搜索选定的站点或整个 Google 数据库。
The results can be styled as you prefer, also similar to Google style. Google CSE works with web and images search.
结果可以根据您的喜好设置样式，也类似于 Google 样式。Google CSE 适用于网络和图像搜索。
google.php
google.php
<script>
(function() {
var cx = 'xxxxxxxxxxxxxxxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
yourpage.php
你的页面.php
<iframe src="google.php?q=<?php echo urlencode('your query'); ?>"></iframe>
回答by jim
This used to work because I used it to create custom Google searches with my own options. Google made changes on their end and broke my private customized search page :( No longer working sample below. It was very useful for complex search patterns.
这曾经有效，因为我用它来创建带有我自己的选项的自定义 Google 搜索。Google 对其进行了更改并破坏了我的私人定制搜索页面 :( 下面不再使用示例。这对于复杂的搜索模式非常有用。
<form method="get" action="http://www.google.com/search" target="main"><input name="q" value="" type="hidden"> <input name="q" size="40" maxlength="2000" value="" type="text">
web
网络
I guess the better option is to just use Curl or similar.
我想更好的选择是只使用 Curl 或类似的。
回答by Monty
Its not ideal but you can use a proxy server and it works fine. For example go to hidemyass.com put in www.google.com and put the link it goes to in an iframe and it works!
它并不理想，但您可以使用代理服务器并且它工作正常。例如，转到 hidemyass.com 并放入 www.google.com 并将其指向的链接放入 iframe 中，它就可以工作了！
