Question

我正在尝试将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中呈现，它只是空白。发生了什么事？

Answer 1

原因是，Google正在发送“X-Frame-Options：SAMEORIGIN”响应标头。此选项可防止浏览器显示未与父页面托管在同一域中的iFrame。

请参阅：Mozilla Developer Network - The X-Frame-Options response header

Answer 2

这不是不可能的。
使用反向代理服务器来处理不同原因问题。我曾经使用Nginx和proxy_pass来更改页面的网址。你可以尝试一下。

另一种方法是在服务器上编写一个简单的代理页面，只需从Google请求并将结果输出到客户端。

Answer 3

正如此处所述，由于Google正在发送“X-Frame-Options：SAMEORIGIN”响应标头，因此您无法在iframe中将src设置为“http://www.google.com”。

如果您想将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>

修改

这个答案不再适用。有关如何使用Google自定义搜索元素替换iframe搜索的信息和说明，请查看： https://support.google.com/customsearch/answer/2641279

Answer 4

您可以使用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>

在此处运行：http://jsfiddle.net/2gou4yen/

此处的代码：How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

Answer 5

它不理想，但你可以使用代理服务器，它工作正常。例如，请访问www.google.com中的hidemyass.com并将其链接放在iframe中，它可以正常工作！

Answer 6

这曾经有用，因为我用自己的选项创建自定义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">

网络

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

Answer 7

如果您使用的是PHP，则可以使用file_get_contents()打印内容：

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

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

不过，您可以使用str_replace()之类的技巧来替换图片中的绝对网址：

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

Answer 8

您可以使用Google CSE（自定义搜索引擎）进行解决，可以轻松插入到iframe中。您可以创建自己的搜索引擎，搜索所选网站或整个Google的数据库。

结果可以根据您的喜好设置样式，也类似于Google风格。 Google 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>

<强> yourpage.php

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

Answer 9

我目前正在自己进行实验，碰巧正在使用此StackOverflow帖子作为指南。对于其他偶然发现的人，我想指出的一件事是，“ Google自定义搜索”选项无法返回与标准Google.com搜索引擎完全相同的结果。结果非常接近，因此，如果您快速便捷地查找内容，则可以使用Google自定义搜索。还要尝试使用此处提到的代理服务器方法进行实验，以查看是否可以获得与我想要的结果更接近的结果。

如何在iframe中显示google.com？

9 个答案: