Wie kann ich eine benutzerdefinierte Breite auf meiner Google-Suche iframe?

StackOverflow https://stackoverflow.com/questions/297349

Frage

Ich versuche, Google-Suche für meine Seite zu verwenden:

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

Es spielt nicht schön mit einigen Bildschirmauflösungen. Hier ist der Code von Google gegeben: 

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

ich die „googleSearchFrameWidth“ geändert bis zu 250 denken, dass die Breite in Pixel werden Einstellung sollte (es war 600, mit zu beginnen). Aber mit kleineren Bildschirmen (1024 * 768) es ragt die Seite meines divs.

Mache ich etwas dumm?

War es hilfreich?

Lösung

Ran in die gleiche Situation Sie die iFrame, um die Größe haben wollen. Man könnte meinen, den googleSearchFrameWidth Wert zu ändern würde den Trick tun, aber nee.

So griff ich zu DOM-Manipulation. Da der Name des iFrame ist „googleSearchFrame“ Gleich nach dem 

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

Referenz, habe ich eine andere <script>-Tag mit dem folgenden: 

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

Die oben setzt die Breite des iFrame bei 600px. In Ihrem Fall offensichtlich, würden Sie es auf 250. Wenn du paranoid bist, dass Google könnte den iFrame Namen einen Tag ändern, nur mit der getElementsByTagName('iFrame') Methode gehen und verengt es in dem Dokument in die Position Ihres iFrame nach unten (wenn Sie mehrere iFrames haben).

Andere Tipps

Ich habe drei Einstellungen, die Sie optimieren können, eine Kombination, von denen ich hoffe, dass Sie, wo Sie gehen müssen:

  1. googleSearchFrameWidth - Setzen Sie diese in der JavaScript auf die gewünschte Breite. Dies ist die offensichtlichste und diejenige, die Sie haben wahrscheinlich schon gezwickt.
  2. Breite von cse-Suchergebnisse div -. Verwenden Sie ein Inline-Style-Statement (zum Beispiel style ="width:500") die Breite des div auf
  3. Stellen Sie den IFrame Style - Wenn Sie überprüfen, werden Sie wahrscheinlich feststellen, dass alle diese Inhalte von Google über einen IFrame gerendert werden wird. Das ist ein bisschen schwieriger zu optimieren, aber machbar. Um dies zu tun, fügen Sie eine Anweisung an das Ende Ihres Sheet wie #cse-search-results iframe { }, einschließlich der tatsächlichen iframe Stil innerhalb der Klammern.

Ich hoffe, einer von diesen oder eine Kombination aus diesen erweist sich für Sie die Antwort sein. Im Zweifelsfall einen DOM-Inspektoren wie der in Firebug verwenden, um die Auswirkungen der Änderungen auf dem DOM zu analysieren. Hoffe, das hilft.

UPDATE 22.06.10 - Gefunden eine einfachere Lösung, die unten. Ändern Sie die FORID Wert in der im Code FORID: 11 . Daher eine Zeile von Code sollte ähnlich aussehen: 

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

Versuchen Sie, nur das Hinzufügen 

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

in Ihrem CSS.

Einfache Schritte der googleSearchFrameWidth in Ihrer Website zu ändern:

  1. Laden Sie Ihre eigene 'show_afs_search.js' Datei von http://www.google.com /afsonline/show_afs_search.js und es im selben Verzeichnis speichern, wo Sie Sie results.htm Website haben.

  2. Öffnen Sie Ihre results.htm Webseite und ändern Sie die Zeile Code in das Skript ... src = "http://www.google.com/afsonline/show_afs_search.js" TO: src = "show_afs_search.js"

  3. Öffnen Sie Ihre eigene ‚show_afs_search.js‘ Datei und ändern Sie die Einstellung Breite: a zu Breite: „600“ (Oder was auch immer Sie die Breite in Pixel festlegen möchten) und Ihre eigene ‚show_afs_search.js‘ Datei speichern.

  4. Laden Sie beide Dateien auf Ihrem Hosting-Website im selben Verzeichnis: results.htm und show_afs_search.js'

FERTIG! 

<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 wird nicht zulassen, dass Sie eine Breite kleiner als 500px verwenden. Ihre beste Wette ist, einen Stil für den iframe zu erstellen: 

<style>
#cse-search-results iframe {width: 200px; }
</style>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top