我该如何在我的Google搜索iframe中设置自定义宽度？

Question

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

http://www.houseofhawkins.com/search.php

但它与某些屏幕分辨率不兼容。以下是来自谷歌的代码:

<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，认为这应该是以像素设置宽度的（原来是600）。但在较小的屏幕（1024 * 768）上，它会超出我的div。

我做错了什么吗？

- Jon

---

PS…我应该用什么来包装我的代码段呢？显然不是[code] :p - Jon

你可以通过在每行代码前面缩进4个空格来格式化代码。 - Jonathan S.

只需点击工具栏中的代码按钮。已经修复了。 - GEOCHET

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的影响。希望这有所帮助。

- Thomas Beck

---

有人遇到搜索结果行被截断的问题吗？#3很好用，但它正在切断我的排版行...非常奇怪，无法解决。 - creativeedg10

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中。

- Xerri

Answer 3

我遇到了与您相同的问题，想要调整iFrame的大小。您可能认为更改googleSearchFrameWidth值就可以解决问题，但不是这样。

所以我采用了DOM操作。由于iFrame的名称为“googleSearchFrame”，因此在

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

参考，我添加了另一个<script> 标签，内容如下：

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

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

- Jacob Gube

Answer 4

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

1. 从 http://www.google.com/afsonline/show_afs_search.js 下载您自己的 '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 修改为 width:"600" （或者您想要设置的像素宽度），然后保存您自己的 'show_afs_search.js' 文件。

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

完成！

- Orlando

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>

- Ali Bektash

Answer 6

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

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

- dhorn