Programmierung > JavaScript > Code Snippets > openWindow

01.07.2003

Manche Inhalte einer Website, wie AGBs oder Kontakthinweise, sollen auf Wunsch des Betreibers oder Designers in einem eigenen Fenster auftauchen, dessen Größe bestimmte Ausmaße annehmen soll, oder in dem beispielsweise die Adreßzeile des Browsers unterdrückt sein soll. Mit folgendem Source Code wird der anzuzeigende Inhalt (kontakt.html) im eigenen Browser-Fenster mit Namen "popup" "aufpoppen", dessen Größe 300x500 Pixel beträgt, das seitliche Laufleisten beinhaltet, aber keine weiteren Browser-Elemente:

<a onClick="window.open('./kontakt.html', 'popup', 
'menubar=no,scrollbars=yes,location=0,resizable=yes,toolbar=0,status=1,height=500,width=300')" 
TARGET="popup" href="./kontakt.html">Kontakt</a>
		

Durch die Angabe des Links auch im HREF-Attribut des A-Elements ist gewährleistet, daß auch Browser mit de-aktiviertem Scripting die verlinkte HTML-Seite in einem neuen Fenster sehen. Weiters wird damit auch die häßliche Anzeige des JavaScript-Codes in der Statuszeile des Browsers vermieden. Siehe dazu auch die Beschreibung der "Zurück"-Funktionalität. Und schließlich: auch Suchmaschinen Robots (Gatherer) führen JavaScript-Programme nicht aus! Sie erreichen daher den Inhalt nicht, wenn in HREF-Attribut die JavaScript-Anweisung "window.open" steht, aber kein URL einer HTML-Datei.

Ein Klick auf das Wort Test öffnet ein Fenster mit Namen "MeinTest". Darin kann mit Hilfe von JavaScript-Funktionalität die Hintergrundfarbe geändert werden.

Eine alternative Variante ist es, eine Scriptfunktion im HEAD-Teil der Seite zu schreiben, und diese Funktion aufzurufen. So erspart man sich das mehrfache Schreiben der Javascript-Statements, wenn die Popup-Funktionalität mehrfach auf einer Seite benötigt wird.

<script type="text/javascript">
<!--

function OeffneFenster(Seite, FensterName, Breite, Hoehe, Links, Oben) {
	MeinFenster =
	window.open(Seite, FensterName,
		"width="+Breite+",height="+Hoehe+",left="+Links+",top="+Oben+
		",location=0,menubar=0,resizable=0,scrollbars=0,status=0,");
	MeinFenster.focus();
}

//-->
</script>
		

Der Aufruf im BODY-Teil kann dann so erfolgen:

<A onClick="javascript:OeffneFenster('seite1.html', 'Seite1', 700, 500, 100, 100); return false;" 
	TARGET="Seite1" HREF="seite1.html">Öffne Seite 1</a>

<A onClick="javascript:OeffneFenster('seite2.html', 'Seite2', 800, 600, 50, 50); return false;" 
	TARGET="Seite2" HREF="seite2.html">Öffne Seite 2</a>
		

Wünsche, Anregungen und Beschwerden bitte im Gästebuch deponieren.