如何在 Google 搜索结果页面中嵌入 iframe

Question

无论出于何种原因，这并不重要，我正在尝试通过 iframe 将谷歌购物与另一个页面结合起来。

我尝试了here 提出的方法，包括在 iframe 中嵌入谷歌自定义搜索查询，但谷歌自定义搜索不允许访问购物标签。

我想，如果您无法嵌入 Google，请将自己嵌入其中。所以我继续在页面中注入一些 jQuery

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

将google购物搜索结果页面清理为我需要的内容，即div#search中的html

jQuery(function($) {$('#search').show().parentsUntil('body').andSelf().siblings().hide();});

创建一个 iframe 并注入它：

var iframe = document.createElement('iframe')
iframe.src="http://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)

唯一的问题是 iframe 不加载页面的内容，因此是空白的。如果您在任何其他页面中尝试上述 sn-p，它就会起作用。谷歌似乎阻止加载 iframe。我怎样才能解决这个问题？

Answer 1

Google 似乎无法使用 iframe...即使您不使用 JS。 您应该改用Google Custom Search API，它允许您创建自定义搜索引擎。 您只需输入一个示例网站，将选项更改为搜索所有网络。并再次删除您输入的网站。 要创建自定义搜索引擎，您需要一个 google 帐户。 开始here。

Answer 2

当我运行该代码时，我的控制台中报告了以下错误：

VM259:7 混合内容：“https://www.google.co.uk/?gws_rd=ssl”处的页面是通过 HTTPS 加载的，但请求了不安全的资源“http://example.com/”。此请求已被阻止；内容必须通过 HTTPS 提供。

将其更改为 HTTPS URL：

var iframe = document.createElement('iframe')
iframe.src="https://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)

…让它工作正常（尽管它藏在徽标后面）：

Answer 3

@Quentins 评论的 Tnx。

更新：

将代码嵌入谷歌网站：

一般来说，您不能为不属于您的网页嵌入代码。

如果用户打开您的网站并使用 google 打开另一个选项卡，或者您的网站使用 google 打开另一个选项卡，则您的网站无法访问 google 网站源代码/上下文，并且您无法影响 google 网站，因为有彼此完全隔离。

您在 您的 浏览器控制台中创建的 Google 页面中似乎是您清理结果和嵌入 iframe 的操作。这些更改仅对您的浏览器在本地产生影响，不会影响任何其他打开 google 网站的用户。

可能的解决方案：

其实你可以将一些代码嵌入到其他页面中，但是你需要使用：

• Browser extensions（太复杂了，因为用户需要安装你的浏览器扩展）
• XSS/其他易受攻击者（谷歌搜索网站几乎不可能）

将 google 嵌入您的页面：

由于 google.com 的 http 响应中的 x-frame-options 标头，您无法嵌入来自 google 的 iframe。没有好的解决方法，抱歉。

X-Frame-Options HTTP 响应标头可用于指示是否应允许浏览器以<frame>、<iframe> 或<object> 呈现页面。网站可以使用它来避免点击劫持攻击，确保其内容不会嵌入到其他网站中。