Come posso impostare una larghezza personalizzata sul mio iframe di ricerca di Google?

Question

Sto cercando di utilizzare la ricerca di Google per il mio sito:

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

Non funziona bene con alcune risoluzioni dello schermo. Ecco il codice fornito da 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>

Ho cambiato il " googleSearchFrameWidth " fino a 250 pensando che dovrebbe essere l'impostazione della larghezza in px, (era 600 per cominciare). Ma con schermi più piccoli (1024 * 768) sporge il lato dei miei div.

Sto facendo qualcosa di stupido?

Answer 1

Si è verificato lo stesso problema con il quale hai voluto ridimensionare l'iFrame. Penseresti che cambiare il valore googleSearchFrameWidth farebbe il trucco, ma no.

Quindi ho fatto ricorso alla manipolazione del DOM. Poiché il nome dell'iFrame è & Quot; googleSearchFrame & Quot ;, subito dopo il

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

riferimento, ho aggiunto un altro <script> tag con il seguente:

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

Quanto sopra imposta la larghezza dell'iFrame su 600px. Nel tuo caso, ovviamente, dovresti impostarlo su 250. Se sei paranoico del fatto che Google potrebbe cambiare il nome dell'iFrame un giorno, vai con il metodo getElementsByTagName('iFrame') e restringilo fino alla posizione dell'iFrame nel documento (se hai più iFrame).

Answer 2

Ho tre impostazioni che puoi modificare, una combinazione delle quali spero ti porterà dove devi andare:

1. googleSearchFrameWidth : imposta questo valore in JavaScript sulla larghezza desiderata. Questo è il più ovvio e quello che probabilmente hai già ottimizzato.
2. Larghezza del div dei risultati della ricerca cse - Usa un'istruzione di stile in linea (ad esempio style ="width:500") per impostare la larghezza del div.
3. Imposta lo stile IFrame - Se selezioni, probabilmente noterai che tutti questi contenuti vengono riprodotti da Google tramite un IFrame. Questo è un po 'più difficile da modificare ma fattibile. Per fare ciò, aggiungi un'istruzione alla fine del tuo foglio di stile come #cse-search-results iframe { }, incluso lo stile iframe effettivo tra parentesi.

Spero che una di queste o una combinazione di queste sia la risposta per te. In caso di dubbi, utilizzare un ispettore DOM come quello disponibile in Firebug per analizzare l'impatto delle modifiche sul DOM. Spero che questo aiuti.

Answer 3

AGGIORNAMENTO 22/06/10 : ho trovato una soluzione più semplice di seguito. Modifica il valore FORID nel codice in in FORID: 11 . Pertanto una riga del codice dovrebbe essere simile a questa:

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

---

Prova ad aggiungere

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

nel tuo CSS.

Answer 4

Semplici passaggi per modificare googleSearchFrameWidth nel tuo sito:

1. SCARICA il tuo file "show_afs_search.js" da http://www.google.com /afsonline/show_afs_search.js e salvalo nella stessa directory in cui hai la pagina web results.htm.

2. Apri la tua pagina web results.htm e MODIFICA il codice riga nello script ... src = " http: //www.google.com/afsonline/show_afs_search.js " TO: src = & Quot; show_afs_search.js & Quot;

3. Apri il tuo file 'show_afs_search.js' e MODIFICA la larghezza dell'impostazione: a alla larghezza: " 600 " (o qualunque cosa tu voglia impostare la larghezza in pixel) e salva il tuo file "show_afs_search.js".

4. Carica entrambi i file sul tuo sito di hosting nella stessa directory: results.htm e show_afs_search.js '

FATTO!

Answer 5

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

Answer 6

Google non ti consentirà di utilizzare una larghezza inferiore a 500 px. La tua scommessa migliore è creare uno stile per l'iframe:

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