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

时间:2008-11-17 23:29:06

标签: google-search google-custom-search

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

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。

我做了些蠢事吗?

6 个答案:

答案 0 :(得分:6)

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

  1. googleSearchFrameWidth - 在JavaScript中将其设置为所需的宽度。这是最明显的一个,你可能已经调整过了。
  2. cse-search-results div的宽度 - 使用内联样式语句(例如style ="width:500")来设置div的宽度。
  3. 设置IFrame样式 - 如果您选中,您可能会注意到所有这些内容都是通过IFrame从Google呈现的。这有点难以调整,但可行。为此,请在样式表的末尾添加一个语句,例如#cse-search-results iframe { },包括括号内的实际iframe样式。
  4. 我希望这些中的一个或其组合证明是您的答案。如有疑问,请使用DOM检查器(如Firebug中提供的检查器)来分析更改对DOM的影响。希望这会有所帮助。

答案 1 :(得分:4)

更新22/06/10 - 找到一个更简单的解决方案,如下所示。将输入代码中的 FORID 值更改为 FORID:11 。因此,您的一行代码应该与此类似:

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

尝试添加

#cse-search-results iframe {width: 100%;}
在你的CSS中

答案 2 :(得分: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)。

答案 3 :(得分: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'
  5. DONE!

答案 4 :(得分:1)

&#13;
&#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;
&#13;
&#13;

答案 5 :(得分:0)

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

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