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

我做了些蠢事吗？

Answer 1

我有三个你可以调整的设置，我希望这些设置可以让你到达你需要去的地方：

googleSearchFrameWidth - 在JavaScript中将其设置为所需的宽度。这是最明显的一个，你可能已经调整过了。
cse-search-results div的宽度 - 使用内联样式语句（例如style ="width:500"）来设置div的宽度。
设置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>标记，其中包含以下内容：

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

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

Answer 4

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

从http://www.google.com/afsonline/show_afs_search.js下载您自己的'show_afs_search.js'文件，并将其保存在您拥有results.htm网页的同一目录中。
打开results.htm网页并将行代码修改为脚本 ... src =“http://www.google.com/afsonline/show_afs_search.js”TO：src =“show_afs_search.js”
打开您自己的'show_afs_search.js'文件并修改设置宽度：a 宽度：“600” （或者你想设置宽度的任何东西）并保存你自己的'show_afs_search.js'文件。
将这两个文件上传到您位于同一目录的托管网站：results.htm和show_afs_search.js'

DONE！

Answer 5

＆＃13;

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

＆＃13;

Answer 6

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

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

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

6 个答案: