Comment définir une largeur personnalisée pour mon iframe de recherche Google?

Question

J'essaie d'utiliser la recherche Google pour mon site:

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

Cela ne fonctionne pas bien avec certaines résolutions d’écran. Voici le code fourni par 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>

J'ai modifié le " googleSearchFrameWidth " jusqu’à 250 en pensant que la largeur devrait être réglée en px (c’était au début 600). Mais avec des écrans plus petits (1024 * 768), il sort du côté de mes divs.

Est-ce que je fais quelque chose de stupide?

Answer 1

Vous avez rencontré le même problème que vous souhaitiez redimensionner l’iFrame. Vous penseriez que changer la valeur googleSearchFrameWidth ferait l'affaire, mais non.

J'ai donc eu recours à la manipulation du DOM. Puisque le nom de l'iFrame est & "; googleSearchFrame &", Juste après le

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

référence, j'ai ajouté une autre <script> balise comportant les éléments suivants:

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

Ce qui précède définit la largeur de l'iFrame sur 600px. Dans votre cas, évidemment, vous voudriez le définir sur 250. Si vous pensez que Google pourrait changer le nom de iFrame un jour, utilisez simplement la méthode getElementsByTagName('iFrame') et affinez-la jusqu'à la position de votre iFrame dans le document (si vous avez plusieurs iFrames).

Answer 2

J'ai trois réglages que vous pouvez modifier, une combinaison dont j'espère vous mènera là où vous devez aller:

1. googleSearchFrameWidth : définissez cette option dans le code JavaScript à la largeur souhaitée. C’est le cas le plus évident et celui que vous avez probablement déjà modifié.
2. Largeur de cse-search-results div - Utilisez une instruction de style en ligne (par exemple, style ="width:500") pour définir la largeur du div.
3. Définir le style IFrame : si vous cochez cette case, vous remarquerez probablement que tout ce contenu est restitué à partir de Google via un IFrame. C'est un peu plus difficile à ajuster mais faisable. Pour ce faire, ajoutez une instruction à la fin de votre feuille de style, telle que #cse-search-results iframe { }, y compris le style iframe réel entre crochets.

J'espère que l'un de ceux-ci ou une combinaison de ceux-ci s'avérera être la solution pour vous. En cas de doute, utilisez un inspecteur DOM, tel que celui disponible dans Firebug, pour analyser l'impact de vos modifications sur le DOM. J'espère que cela vous aidera.

Answer 3

UPDATE 22/06/10 : vous avez trouvé une solution plus simple que celle présentée ci-dessous. Modifiez la valeur FORID dans le code entrant en FORID: 11 . Par conséquent, une ligne de votre code doit ressembler à ceci:

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

Essayez d'ajouter simplement

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

dans votre CSS.

Answer 4

Procédure simple pour modifier googleSearchFrameWidth sur votre site:

1. TÉLÉCHARGEZ votre propre fichier 'show_afs_search.js' à partir de http://www.google.com /afsonline/show_afs_search.js et enregistrez-le dans le même répertoire que votre page de résultats.htm.

2. Ouvrez votre page Web results.htm et modifiez le code de ligne dans le script. ... src = " http: //www.google.com/afsonline/show_afs_search.js " À: src = & Quot; show_afs_search.js & Quot;

3. Ouvrez votre propre fichier 'show_afs_search.js' et modifiez la largeur du paramètre: a à largeur: " 600 " (ou ce que vous voulez définir en largeur) et sauvegardez votre propre fichier 'show_afs_search.js'.

4. Téléchargez les deux fichiers sur votre site d'hébergement dans le même répertoire: results.htm et show_afs_search.js '

FAIT!

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 ne vous autorisera pas à utiliser une largeur inférieure à 500 pixels. Votre meilleur pari est de créer un style pour l’iframe:

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