如何在 Google 搜索 iframe 上设置自定义宽度？

Question

我正在尝试对我的网站使用谷歌搜索：

http://www.houseofhawkins.com/search.php< /a>

在某些屏幕分辨率下效果不佳。 以下是 google 给出的代码：

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 250;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

我将“googleSearchFrameWidth”更改为 250，认为应该以 px 为单位设置宽度（一开始是 600）。 但对于较小的屏幕（1024 * 768），它会伸出我的 div 的一侧。

我是不是在做蠢事？

Answer 1

我有三个设置可供您调整，我希望这三个设置的组合能够帮助您到达您需要的位置：

1. googleSearchFrameWidth - 在 JavaScript 中将其设置为您想要的宽度。 这是最明显的一个，您可能已经调整过了。
2. cse-search-results div 的宽度 - 使用内联样式语句（例如 style ="width:500"）设置 div 的宽度。
3. 设置 IFrame 样式 - 如果您检查，您可能会注意到所有这些内容都是通过 IFrame 从 Google 呈现的。 这有点难以调整，但也是可行的。 为此，请在样式表末尾添加一条语句，例如 #cse-search-results iframe { }，在括号内包含实际的 iframe 样式。

我希望其中之一或这些的组合能够成为您的答案。 如有疑问，请使用 DOM 检查器（例如 Firebug 中提供的检查器）来分析更改对 DOM 的影响。 希望这可以帮助。

Answer 2

更新 22/06/10 - 找到了一个更简单的解决方案，如下所示。 将代码中的 FORID 值更改为 FORID:11。 因此，您的一行代码应类似于以下内容：

<input type="hidden" name="cof" value="FORID:11;NB:1" />

---

尝试仅添加

#cse-search-results iframe {width: 100%;}

CSS。

Answer 3

遇到了与您想要调整 iFrame 大小相同的麻烦。 您可能认为更改 googleSearchFrameWidth 值就可以解决问题，但事实并非如此。

所以我求助于 DOM 操作。 由于 iFrame 的名称是“googleSearchFrame”，因此在引用之后

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

，我添加了另一个

<script type="text/javascript">
  document.getElementsByName('googleSearchFrame').item(0).width = 600;
</script>

上面设置了 iFrame 的宽度位于600px。 显然，就您而言，您希望将其设置为250。 如果您担心 Google 有一天可能会更改 iFrame 名称，只需使用 getElementsByTagName('iFrame') 方法并将其范围缩小到 iFrame 在文档中的位置（如果您有多个 iFrame）。

Answer 4

修改网站中 googleSearchFrameWidth 的简单步骤：

1. 从 http://www.google.com/afsonline/show_afs_search.js 并将其保存在 results.htm 网页所在的同一目录中。

2. 打开您的 results.htm 网页并将行代码修改到脚本中
   ... src="http://www.google.com/afsonline/show_afs_search.js" TO: src="show_afs_search.js"

3. 打开您自己的“show_afs_search.js”文件并修改设置 width:a
   宽度：“600”
   （或任何您想要设置宽度（以像素为单位）的内容）并保存您自己的“show_afs_search.js”文件。

4. 将这两个文件上传到托管站点的同一目录：results.htm 和 show_afs_search.js'

完成！

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("iframe[name='googleSearchFrame']").css("width","100%");
	});
</script>

Answer 6

Google 不允许您使用小于 500px 的宽度。 最好的选择是为 iframe 创建一种样式：

<style>
#cse-search-results iframe {width: 200px; }
</style>