如何在Google搜索iframe上设置自定义宽度? [英] How can I set a custom width on my Google search iframe?

问题描述

我正在尝试对我的网站使用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.

我在做蠢事吗?

解决方案

遇到了与调整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).

I am trying to use google search for my site:

http://www.houseofhawkins.com/search.php

It is not playing nice with some screen resolutions. Here is the code given from google:

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

I changed the "googleSearchFrameWidth" down to 250 thinking that should be setting the width in px, (it was 600 to start with). But with smaller screens (1024 * 768) it sticks out the side of my divs.

Am I doing something stupid?

解决方案

Ran into the same trouble you did wanting to resize the iFrame. You'd think changing the googleSearchFrameWidth value would do the trick, but nope.

So I resorted to DOM manipulation. Since the name of the iFrame is "googleSearchFrame", Right after the

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

reference, I added another <script> tag with the following:

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

The above sets the width of the iFrame at 600px. In your case, obviously, you'd want to set it to 250. If you're paranoid that Google might change the iFrame name some day, just go with the getElementsByTagName('iFrame') method and narrow it down to the position of your iFrame in the document (if you have multiple iFrames).

这篇关于如何在Google搜索iframe上设置自定义宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！