如何在 iframe 中显示 google.com？

Posted 2023-05-09

技术标签:

【中文标题】如何在 iframe 中显示 google.com？【英文标题】：How to show google.com in an iframe? 【发布时间】：2018-01-04 09:31:02 【问题描述】：

我正在尝试将 google.com 放入我网站上的 iframe，这适用于包括 yahoo 在内的许多其他网站。但它不适用于谷歌，因为它只显示一个空白的 iframe。为什么不渲染？有什么技巧可以做到吗？

我已经尝试过以通常的方式在 iframe 中显示网站，如下所示：

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

google.com 页面不会在 iframe 中呈现，它只是空白。怎么回事？

【问题讨论】：

为什么需要在 iframe 中显示 Google？不要引用我的话，但也许 google 使用了 window.property 之类的东西，在 IFrame 中会破坏部分显示？如果你想要谷歌搜索栏看这个链接：google.com/webelements/#!/custom-search @PaulAlanTaylor 这是我客户的要求，据说他想在 iframe 中方便地在他的网站上显示 google 结果。只要这样做：<iframe src="https://www.google.com/webhp?igu=1"></iframe> 【参考方案1】：

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

见：Mozilla Developer Network - The X-Frame-Options response header

【讨论】：

我觉得这没什么用。如果有人能想到使用该功能的理由，而不是仅仅因为卑鄙，请随时告诉我。 @JonHanna 不会简单地联系谷歌。您可以在iframe 中使用此网址：google.com/search?igu=1 或者你可以使用我的X-Frame-Bypass Web 组件。 @niutech 令人难以置信的是，您的带有 ?igu=1 参数的 URL 有效。知道为什么吗？该选项背后的最初目的是什么？有趣的是，这会导致我显示为未登录，但搜索字段仍然建议我的一些实际历史搜索。所以我“有点”登录了。很奇怪。【参考方案2】：

这并非不可能。 使用反向代理服务器来处理不同来源的问题。我曾经使用带有proxy_pass 的 nginx 来更改页面的 url。你可以试试看。

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

【讨论】：

谷歌阻止了我简单的尝试弯曲他们的标准搜索网址。 :( 我最终使用了“Google Custom”，它发送不同的 X-Frame-Options。google.com/custom?q=test&btnG=Search 有没有关于如何用 Nginx 解决这个问题的教程？【参考方案3】：

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

如果您想将 Google 嵌入到 iframe 中，您可以按照 sudopeople 在上面评论中的建议进行操作，并使用如下所示的 Google 自定义搜索链接。这对我很有用（将 'q=' 留空以开始空白搜索）。

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

编辑：

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

【讨论】：

谢谢 ScottyG！有没有添加图片结果的选项？ Hey Krzysztof Przygoda 我认为您可以强制使用 src 进行图像搜索，例如：http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'，但因为它使用搜索？而不是习惯？您将无法在 iframe 中使用它 @ScottyG 上述技术仍然有效吗？我尝试将该行放入空白页面，但我得到的只是一个空白 iframe，即使我提供了查询嗨安德烈斯，看起来你可能是对的。我不再能够让它为我工作。自定义搜索链接现在重定向到 google.ca/webhp?btnG=&gws_rd=ssl，这会强制使用 ssl，并且现在似乎在 iframe 中被阻止。我会继续调查这个，但看起来这个派对可能已经结束了...... :(【参考方案4】：

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

【讨论】：

【参考方案5】：

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

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

来自这里的代码：How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

【讨论】：

它正在工作，但不是第一次。如果我打开我嵌入的网页，我必须第一次点击刷新来加载页面。之后就好了。 @TV-C-15 将http://query.yahooapis.com 替换为https://query.yahooapis.com 时有效。也在 codepen [codepen.io/anon/pen/Xyqqvb] 上测试过，它可以在 firefox、chrome、opera 上工作（尽管有时需要刷新），如果我在本地复制，它在 edge BUT 上不起作用然后我打开浏览器继续重新加载页面..这里是完整的脚本：[files.fm/u/arzrb2h4] 不工作。还有其他方法可以在 iframe 中打开 google 吗？【参考方案6】：

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

【讨论】：

【参考方案7】：

这曾经很有效，因为我用它来创建带有我自己选项的自定义 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 或类似的。

【讨论】：

【参考方案8】：

如果你使用 PHP，你可以使用file_get_contents() 来打印内容：

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

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

但是，您可以使用一些技巧，例如 str_replace() 函数来替换图像中的绝对网址：

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

【讨论】：

【参考方案9】：

它并不理想，但您可以使用代理服务器，它工作正常。例如，去 hidemyass.com 输入 www.google.com 并将它转到的链接放入 iframe 中，它就可以工作了！

【讨论】：

它不工作

以上是关于如何在 iframe 中显示 google.com？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 iframe 上的卫星中添加谷歌地图

使用 HTML 禁用 Google Maps iframe 中的 POI

如何导入flex iframe组件？

如何使用Google API，以便将先前创建的KML文件发送到“我的Google地图”，然后获取返回的URL以显示在网页中

为啥 google.com 不加载到 iFrame [重复]

如何导入 flex iframe 组件？