Как я могу установить пользовательскую ширину в iframe поиска Google?

Я пытаюсь использовать поиск Google для своего сайта:

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

На некоторых разрешениях экрана игра не очень приятная. Вот код, полученный от 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>

Я изменил «googleSearchFrameWidth» до 250, думая, что нужно установить ширину в пикселях (для начала было 600). Но при меньших экранах (1024*768) он торчит сбоку моих дивов.

Я делаю что-то глупое?


google-search google-custom-search
person Jon    schedule 17.11.2008    source источник
comment
P.S... пожалуйста, во что я должен обернуть свои сегменты кода? Явно не [код] :p   -  person Jon    schedule 18.11.2008
comment
Вы можете просто сделать отступ каждой строки кода на 4 пробела.   -  person Jonathan S.    schedule 18.11.2008
comment
Просто нажмите кнопку кода на панели инструментов. Уже исправлено.   -  person GEOCHET    schedule 18.11.2008

Ответы (5)


arrow_upward
3
arrow_downward

Столкнулись с той же проблемой, что и вы, когда хотели изменить размер 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).

person Jacob Gube    schedule 20.01.2010

arrow_upward
6
arrow_downward

У меня есть три параметра, которые вы можете настроить, и я надеюсь, что их комбинация приведет вас туда, куда вам нужно:

  1. googleSearchFrameWidth — установите желаемую ширину в JavaScript. Это наиболее очевидный вариант, который вы, вероятно, уже настроили.
  2. Ширина блока cse-search-results. Используйте оператор встроенного стиля (например, style ="width:500"), чтобы установить ширину блока.
  3. Установите стиль IFrame. Если вы отметите этот флажок, вы, вероятно, заметите, что весь этот контент обрабатывается Google через IFrame. Это немного сложнее настроить, но выполнимо. Для этого добавьте оператор в конец вашей таблицы стилей, например #cse-search-results iframe { }, включая фактический стиль iframe в скобках.

Я надеюсь, что один из них или их комбинация окажется для вас ответом. Если вы сомневаетесь, используйте инспектор DOM, например, доступный в Firebug, чтобы проанализировать влияние ваших изменений на DOM. Надеюсь это поможет.

person Thomas Beck    schedule 06.07.2009
comment
Кто-нибудь сталкивался с проблемой обрезания строки результатов поиска? # 3 работает отлично, но он режет мои типографские линии... очень странно, не могу понять. - person creativeedg10; 14.12.2011

arrow_upward
4
arrow_downward

ОБНОВЛЕНИЕ 22/06/10 – найдено более простое решение, описанное ниже. Измените значение FORID в коде на FORID:11. Поэтому одна строка вашего кода должна выглядеть примерно так:

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

Попробуйте просто добавить

#cse-search-results iframe {width: 100%;}

в вашем CSS.

person Xerri    schedule 22.06.2010

arrow_upward
1
arrow_downward

Простые шаги для изменения googleSearchFrameWidth на вашем сайте:

  1. ЗАГРУЗИТЕ свой собственный файл show_afs_search.js с http://www.google.com/afsonline/show_afs_search.js и сохраните его в том же каталоге, где находится веб-страница results.htm.

  2. Откройте веб-страницу с результатами.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.

ВЫПОЛНЕНО!

person Orlando    schedule 15.01.2010

arrow_upward
0
arrow_downward

Google не позволит вам использовать ширину меньше 500 пикселей. Лучше всего создать стиль для iframe:

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