Как установить произвольную ширину в iframe поиска Google?
-
08-07-2019 - |
Вопрос
Я пытаюсь использовать поиск 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).
Другие советы
У меня есть три параметра, которые вы можете настроить, и я надеюсь, что комбинация этих параметров поможет вам добраться до нужного места:
<Ол>style ="width:500"
) для установки ширины div. #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 на вашем сайте:
- ЗАГРУЗИТЕ свой собственный файл show_afs_search.js с сайта http://www.google.com/afsonline/show_afs_search.js и сохраните его в том же каталоге, где находится веб-страница results.htm.
Откройте свою веб-страницу results.htm и ИЗМЕНИТЕ код строки в скрипт ...src="http://www.google.com/afsonline/show_afs_search.js" КОМУ:src="show_afs_search.js"
Откройте свой собственный файл 'show_afs_search.js' и ИЗМЕНИТЕ ширину установки:a до ширины:"600" (или все, что вы хотите установить ширину в пикселях) и сохраните свой собственный файл 'show_afs_search.js'.
- Загрузите оба файла на свой хостинг в один и тот же каталог: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>