如何在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认为应该在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

遇到了与您想要调整 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）。