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

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

Вопрос

Я пытаюсь использовать поиск 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) он торчит сбоку от моих дивов.

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

Это было полезно?

Решение

Вы столкнулись с той же проблемой, что и вы, когда хотели изменить размер iFrame. Вы могли бы подумать, что изменение значения googleSearchFrameWidth поможет, но нет.

Поэтому я прибег к манипуляциям с DOM. Поскольку имя iFrame - & Quot; googleSearchFrame & Quot ;, сразу после 

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

Приведенное выше значение устанавливает ширину рамки на 600px. В вашем случае, очевидно, вы захотите установить его на 250. Если вы не уверены, что Google когда-нибудь изменит имя iFrame, просто воспользуйтесь методом getElementsByTagName('iFrame') и сузьте его до положения вашего iFrame в документе (если у вас несколько iFrame).

Другие советы

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

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

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

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

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

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

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

    в вашем CSS.

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

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

    2. Откройте свою веб-страницу results.htm и ИЗМЕНИТЕ код строки в скрипт ...src="http://www.google.com/afsonline/show_afs_search.js" КОМУ:src="show_afs_search.js"

    3. Откройте свой собственный файл 'show_afs_search.js' и ИЗМЕНИТЕ ширину установки:a до ширины:"600" (или все, что вы хотите установить ширину в пикселях) и сохраните свой собственный файл 'show_afs_search.js'.

    4. Загрузите оба файла на свой хостинг в один и тот же каталог:results.htm и show_afs_search.js'

    СДЕЛАННЫЙ!

    <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