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

Question

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

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

2010年6月22日更新 -在下面找到了一个更简单的解决方案。 将in代码中的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的简单步骤：

1. 从http://www.google.com/afsonline/show_afs_search.js下载您自己的“ show_afs_search.js”文件，并将其保存在您创建result.htm网页的目录中。

2. 打开您的results.htm网页，然后将行代码修改为脚本... src =“ http://www.google.com/afsonline/show_afs_search.js”收件人：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'

完成！

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> 

Answer 6

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

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