¿Cómo puedo establecer una anchura personalizada en mi búsqueda de Google iframe?

Question

Estoy tratando de usar la búsqueda de google en mi sitio:

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

No es jugar bonito con algunas resoluciones de pantalla.Aquí está el código de 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>

He cambiado el "googleSearchFrameWidth" hasta 250 pensar que se debe establecer el ancho en px, (era de 600 a empezar).Pero con pantallas más pequeñas (1024 * 768) sobresale al lado de mis divs.

Estoy haciendo algo estúpido?

Answer 1

Topó con el mismo problema que usted hizo querer cambiar el tamaño del iFrame.Usted pensaría que el cambio de la googleSearchFrameWidth valor podría hacer el truco, pero nope.

Así que recurrí a la manipulación del árbol DOM.Desde el nombre del iFrame es "googleSearchFrame", Justo después de la

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

de referencia, he añadido otro <script> etiqueta con la siguiente:

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

La anterior establece el ancho del iFrame en 600px.En su caso, obviamente, usted quiere establecer para la 250.Si usted es paranoico que Google podría cambiar el iFrame nombre algún día, sólo tiene que ir con el getElementsByTagName('iFrame') método y reducirlo a la posición de su iFrame en el documento (si tiene varios iFrames).

Answer 2

Tengo tres configuraciones que puede ajustar, una combinación de las cuales espero lo lleve a donde necesita ir:

1. googleSearchFrameWidth : establezca esto en JavaScript en el ancho deseado. Este es el más obvio y el que probablemente ya haya ajustado.
2. Ancho de cse-search-results div : use una declaración de estilo en línea (por ejemplo, style ="width:500") para establecer el ancho del div.
3. Establezca el estilo de IFrame : si marca, probablemente notará que todo este contenido se representa desde Google a través de un IFrame. Esto es un poco más difícil de modificar pero factible. Para hacer esto, agregue una declaración al final de su hoja de estilo, como #cse-search-results iframe { }, incluido el estilo de iframe real dentro de los corchetes.

Espero que uno de estos o una combinación de estos sea la respuesta para usted. En caso de duda, utilice un inspector DOM como el disponible en Firebug para analizar el impacto de sus cambios en el DOM. Espero que esto ayude.

Answer 3

ACTUALIZACIÓN 22/06/10 - Encontré una solución más simple que a continuación. Cambie el valor FORID en el código de entrada a FORID: 11 . Por lo tanto, una línea de su código debería ser similar a esta:

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

---

Intenta simplemente agregar

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

en tu CSS.

Answer 4

Pasos sencillos para modificar el googleSearchFrameWidth en su sitio:

1. DESCARGUE su propio archivo 'show_afs_search.js' de http://www.google.com /afsonline/show_afs_search.js y guárdelo en el mismo directorio donde tiene la página web results.htm.

2. Abra su página web results.htm y MODIFIQUE el código de línea en el script ... src = " http: //www.google.com/afsonline/show_afs_search.js " TO: src = & Quot; show_afs_search.js & Quot;

3. Abra su propio archivo 'show_afs_search.js' y MODIFIQUE el ancho de configuración: a a ancho: " 600 " (o lo que sea que desee establecer el ancho en píxeles) y guarde su propio archivo 'show_afs_search.js'.

4. Cargue ambos archivos en su sitio de alojamiento en el mismo directorio: results.htm y show_afs_search.js '

¡HECHO!

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 no le permitirá usar un ancho menor que 500px. Su mejor opción es crear un estilo para el iframe:

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