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

StackOverflow https://stackoverflow.com/questions/297349

题

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

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。

我做了些蠢事吗？

有帮助吗？

解决方案

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

其他提示

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

  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的影响。希望这会有所帮助。

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

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

尝试添加

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

。

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

  1. 从 http://www.google.com下载您自己的'show_afs_search.js'文件/afsonline/show_afs_search.js 并将其保存在您拥有results.htm网页的同一目录中。

  2. 打开results.htm网页并将行代码修改为脚本 ... src = <！>; http：//www.google.com/afsonline/show_afs_search.js <！> quot; TO：src = <！> quot; show_afs_search.js <！>

  3. 打开您自己的'show_afs_search.js'文件并修改设置宽度：a to width：<！> quot; 600 <！> quot; （或者你想设置宽度的任何东西）并保存你自己的'show_afs_search.js'文件。

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

    5. DONE！

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

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

<style>
#cse-search-results iframe {width: 200px; }
</style>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top