如何在 iframe 中显示 google.com？答案

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

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

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

<iframe name="I1" id="if1" width="100%" 
 height="254" 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>

标签： html

【解决方案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" 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！有没有添加图片结果的选项？
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" width="500" height="300"></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 中，它就可以工作了！

【讨论】：

它不工作