6

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

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，认为应该以 px 为单位设置宽度（开始时为 600）。但是对于较小的屏幕 (1024 * 768)，它会突出在我的 div 的一侧。

我在做傻事吗？

4

6 回答 6

6

我有三个可以调整的设置，我希望它们的组合能让你到达你需要去的地方：

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

我希望这些中的一个或这些的组合被证明是您的答案。如有疑问，请使用 DOM 检查器（例如 Firebug 中可用的检查器）来分析您的更改对 DOM 的影响。希望这可以帮助。

于 2009-07-06T02:53:49.457 回答
4

更新 22/06/10 - 在下面找到了一个更简单的解决方案。将 in 代码中的FORID值更改为FORID:11。因此，您的代码中的一行应该与此类似：

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

尝试添加

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

在你的 CSS 中。

于 2010-06-22T10:09:48.433 回答
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）。

于 2010-01-20T03:45:31.830 回答
1

在您的网站中修改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”文件并将设置宽度：a 修改为宽度：“600”（或以像素为单位设置宽度的任何内容）并保存您自己的“show_afs_search.js”文件。

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

完毕！

于 2010-01-15T01:22:03.563 回答
1 

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

于 2015-04-03T22:04:44.707 回答
0

Google 不允许您使用小于 500 像素的宽度。最好的办法是为 iframe 创建样式：

<style>
#cse-search-results iframe {width: 200px; }
</style>
于 2009-08-13T18:02:52.240 回答