HTML - 如何在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中呈现,它只是空白。 到底是怎么回事?

Bala asked 2019-07-17T19:42:40Z
8个解决方案
106 votes

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

请参阅:Mozilla开发人员网络 - X-Frame-Options响应标头

Andreas Koch answered 2019-07-17T19:43:00Z
26 votes

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

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

ijse answered 2019-07-17T19:43:37Z
19 votes

正如此处所述,由于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]

ScottyG answered 2019-07-17T19:44:17Z
9 votes

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

代码来自:如何绕过X-Frame选项:SAMEORIGIN HTTP标头?

Netham answered 2019-07-17T19:44:54Z
1 votes

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

Monty answered 2019-07-17T19:45:18Z
1 votes

这曾经有用,因为我用它来创建自己的选项来自定义谷歌搜索。 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或类似的。

jim answered 2019-07-17T19:45:55Z
0 votes

您可以使用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>
WalterV answered 2019-07-17T19:46:35Z
0 votes

我正在尝试自己,并碰巧使用这个StackOverflow帖子作为指南。 对于碰巧遇到这种情况的其他人,我想注意的一件事是,Google自定义搜索选项并未返回与标准Google.com搜索引擎完全相同的结果。 结果非常接近,因此如果您想快速轻松地查找内容,Google自定义搜索可能就是您的选择。 试着尝试使用这里提到的代理服务器方法,看看我是否可以得到更接近我正在寻找的结果。

topherPedersen answered 2019-07-17T19:47:00Z
translate from https://stackoverflow.com:/questions/8700636/how-to-show-google-com-in-an-iframe