Jak ustawić niestandardową szerokość w moim iframe wyszukiwania Google?

Question

Próbuję użyć wyszukiwarki Google na mojej stronie:

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

To nie jest gra ładny z niektórych rozdzielczościach ekranu. Oto kod podany z 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> 

Zmieniłem „googleSearchFrameWidth” w dół do 250 myślenia, które powinno być ustawienie szerokość w pikselach, (było 600 na początek). Ale przy mniejszych ekranach (1024 * 768) wystaje z boku moich div.

Czy robię coś głupiego?

Answer 1

Wystąpił ten sam problem, który chciał zmienić rozmiar ramki iFrame. Można by pomyśleć, że zmiana wartości googleSearchFrameWidth wystarczyłaby, ale nie.

Tak więc uciekłem się do manipulacji DOM. Ponieważ nazwa iFrame jest „googleSearchFrame”, zaraz po nawiązaniu

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

dodałem kolejną <script> tag z następujących czynności:

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

Powyższe ustawia szerokość iFrame na 600px. W twoim przypadku, oczywiście, chcesz ustawić go na 250. Jeśli masz paranoję, że Google może kiedyś zmienić nazwę iFrame, po prostu przejdź do metody iFrame w dokumencie (jeśli masz wiele ramek iFrame).

Answer 2

Mam trzy ustawienia, które można podkręcić, połączenie, które mam nadzieję, że będzie Ci gdzie trzeba iść:

1. googleSearchFrameWidth - zestaw ten w JavaScripcie do żądanej szerokości. To najbardziej oczywisty i prawdopodobnie już zmodyfikowany.
2. Szerokość cse-search-results div - Aby ustawić szerokość elementu div, użyj instrukcji typu inline (np. style ="width:500").
3. Ustawianie stylu IFrame - Jeśli zaznaczysz to, prawdopodobnie zauważysz, że cała ta treść jest renderowana z Google przez ramkę IFrame. Jest to nieco trudniejsze do poprawienia, ale wykonalne. Aby to zrobić, dodaj instrukcję na końcu arkusza stylów, na przykład #cse-search-results iframe { }, w tym rzeczywisty styl elementu iframe w nawiasach.

Mam nadzieję, że jedna z nich lub ich kombinacja okaże się dla Ciebie odpowiedzią. W razie wątpliwości użyj inspektora DOM, takiego jak ten dostępny w Firebug, aby przeanalizować wpływ twoich zmian na DOM. Mam nadzieję że to pomoże.

Answer 3

Google nie zezwoli na użycie szerokości mniejszej niż 500 pikseli. Najprościej jest utworzyć styl dla iframe:

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

Answer 4

proste kroki, aby zmodyfikować googleSearchFrameWidth w witrynie:

1. Pobierz swoją własną pliku 'show_afs_search.js od http://www.google.com/afsonline/show_afs_search.js i ratowania znajduje się w tym samym katalogu, w którym znajduje się strona internetowa results.htm.

2. Otwórz swoją stronę results.htm i ZMIEŃ KOD linii do skryptu ... src = "http://www.google.com/afsonline/show_afs_search.js" TO: src = "show_afs_search.js"

3. Otwórz swój własny plik „show_afs_search.js” i modyfikować ustawienia szerokości: a do szerokości: „600” (lub cokolwiek chcesz ustawić szerokość w pikselach) i zapisywać własne „show_afs_search.js” plik.

4. Prześlij oba pliki na swojej stronie hostingu w tym samym katalogu: results.htm i show_afs_search.js'

gotowe!

Answer 5

AKTUALIZACJA 22/06/10 - Znaleziono prostsze rozwiązanie poniżej. Zmień wartość FORID w kodzie źródłowym na FORID: 11. Dlatego jedna linia ciebie kod powinien wyglądać podobnie do tego:

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

---

Spróbuj po prostu dodając

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

w CSS.

Answer 6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t \t $("iframe[name='googleSearchFrame']").css("width","100%"); 
 
\t }); 
 
</script>