如何在 iframe 中显示 google.com？

我正在尝试将 google.com 放入我的网站的 iframe 中，这与包括雅虎在内的许多其他网站一起工作。但它不与谷歌工作，因为它只显示一个空白 iframe。为什么它不渲染？有什么诀窍吗？

我曾经用一种常用的方法来显示一个像这样的 iframe 网站:

<iframe name="I1" id="if1" width="100%"
height="254" style="visibility:visible"
src="http://www.google.com"></iframe>

Google.com 页面没有在 iframe 中呈现，只是一片空白。这是怎么回事？

323619 次浏览
小开
最佳答案

原因是，谷歌正在发送一个“ X-Frame-Options: SAMEORIGIN”响应头。此选项可防止浏览器显示与父页不驻留在同一域中的 iFrame。

见: Mozilla Developer Network-x 帧-选项响应头

小开

不是不可能。
使用反向代理服务器处理异源问题。我过去常常使用 Nginx 和 proxy_pass来更改页面的 URL。你可以试试。

另一种方法是编写一个简单的代理页面运行在自己的服务器上，只要从谷歌的请求和输出结果给客户端。

小开

这并不理想，但是您可以使用代理服务器，它工作得很好。例如，访问 hidemyass.com，输入 www.google.com，把链接放入 iframe，就可以了！

小开

正如这里所概述的，因为 Google 发送的是“ X-Frame-Options: SAMEORIGIN”响应头，所以不能简单地将 iframe 中的 src 设置为“ http://www.google.com”。

如果你想把 Google 嵌入到 iframe 中，你可以做 sudo 人们在上面的评论中建议的事情，并且使用如下的 Google自定义搜索链接。这对我来说非常有用(在空白搜索开始时留下‘ q =’空白)。

<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>

编辑:

这个答案不再有效。要了解更多信息，以及如何用 Google自定义搜索元素替换 iframe 搜索的说明，请查看: Https://support.google.com/customsearch/answer/2641279

小开

这曾经有用，因为我用它来创建自定义谷歌搜索与我自己的选项。谷歌在他们的终端做了改变，并打破了我的私人定制搜索页面: (不再工作的样本如下。它对于复杂的搜索模式非常有用。

<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">

网

我想更好的选择是使用 Curl 或类似的。

小开

可以在使用 YQL 中绕过 X 框架选项。

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>

在这里运行: http://jsfiddle.net/2gou4yen/

这里的密码是 如何绕过 X 帧选项: SAMEORIGINHTTP 头？

小开

您可以使用 谷歌 CSE(自定义搜索引擎)解决这个问题，它可以很容易地插入到 iframe 中。你可以创建自己的搜索引擎，搜索选定的网站或在整个谷歌的数据库。

搜索结果可以按照您的喜好设置样式，也类似于谷歌风格。谷歌 CSE 的工作与网络和图片搜索。

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>

你的主页

<iframe src="google.php?q=<?php echo urlencode('your query'); ?>"></iframe>
小开

如果使用 PHP，可以使用 file_get_contents()打印内容:

<?php
$page = file_get_contents('https://www.google.com');
echo $page;
?>

这将打印 file_get_contents()函数在这个 URL 中获得的任何内容。 请注意，由于您将内容显示为字符串，而不是作为一个实际的网页，像相对路径图像这样的东西不能正确显示，因为/img/myimg.jpg 现在正在从您的服务器加载，而不再从 google.com。

然而，你可以使用一些技巧，比如 str_replace()函数来替换图像中的绝对 url:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>
小开

您可以使用 https://www.google.com/search?igu=1而不是 https://google.com/，它工作。这个问题是它有 X-Frame-Options Header 策略，浏览器遵循这些策略。


提交答案