JavaScript: Neue Seite oder Fenster öffnen

Neue Seite öffnen


Mit javaScript kann man eine neue Seite öffnen. Dazu ist der Link Neue Seite zunächst ohne href definiert. Das Buttonaussehen kommt durch CSS.

Für den Link wird ein Eventlistener installiert. Dieser ruft die Funktion hrefSeiteNeu auf. In dieser Funktion kann nun alles mögliche gemacht werden. Letztlich wird mit setAttribute die url gesetzt. Hier können dann auch Variablen übergeben werden.

Seite überschreiben


Mit javaScript kann man die vorhandene Seite mit einer neuen Seite überschreiben.

Die aufgerufene Seite sollte einen Zurück-Button enthalten, der dann auf diese Seite zurück führt. Dies kann allgemein mit history.back gelöst werden.

<input type=button
       value="Zurück" 
       onClick="history.back()"
/>

Der Link Seite überschreiben wird zunächst ohne href definiert. Das Buttonaussehen kommt durch CSS.

Für den Link wird ein Eventlistener installiert. Dieser ruft die Funktion hrefSeiteUeber auf. In dieser Funktion kann nun alles mögliche gemacht werden. Letztlich wird mit window.location.href die url gesetzt. Hier können dann auch Variablen übergeben werden.

Fenster öffnen


Ein Fenster wird mit

  v_fenster=window.open("unterFenster1.html","Fenster 1","width=500,height=500,scrollbars=yes,left=100,top=100");

geöffnet.

Dabei wird über dem Browserfenster ein neues Fenster geöffnet. Dieses Fenster kann frei positioniert werden.

Ausschlaggebend für das Fenster ist der Titel (Parameter 2 im obigen Beispiel = Fenster 1). Wird hier der gleiche Titel oder kein Titel angegeben, wird das selbe Fenster verwendet.

In diesem Beipiel wird abgefragt, ob das Fenster geöffnet ist. Ist dies der Fall, wird der Focus auf das Fenster gesetzt. Ist das Fenster nicht vorhanden wird es erzeugt.

Alle Eigenschaften sind hier aufgelistet. location wäre interessant, funktioniert aber nur bei Opera.

Daten zwischen Fenstern austauschen


Es wird ein Unterfenster geöffnet. Die beiden Felder Nachname und Vorname können mit den Buttons beliebig zwischen den Fenstern ausgetauscht werden.

Das Unterfenster enthält die beiden Button zum Daten holen und Daten senden. In beiden Formularen haben die Felder die gleiche ID. Der Unterschied liegt nur im opener. Alle Buttons werden durch Eventlistener gesteuert.

Die Variable v_fenster muss als globale Variable definiert werden.


In diesem Fenster

Button: Fenster öffnen

Öffnet ein Fenster mit dem Unterfenster.

Button-TAG: Fenster öffnen Funktion: fensterAuf()

Button: Fenster schließen

Schließt das Fenster mit dem Unterfenster.

Button-TAG: Fenster schließen Funktion: fensterZu()

Button: Daten holen

Holt die Daten aus dem Unterfenster.

Button-TAG: Daten holen Funktion: datenHolen()

Button: Daten senden

Sendet die Daten an das Unterfenster.

Button-TAG: Daten senden Funktion: datenSenden()


Im Unterfenster

Button: Daten senden

Sendet die Daten an das Hauptformular.

Button-TAG: Daten senden Funktion: dataSenden()

Button: Daten holen

Holt die Daten aus dem Hauptformular.

Button-TAG: Daten holen Funktion: dataHolen()

Button: Schließen

Schließt das Unterfenster.

Button-TAG: Schließen Funktion: fensterZu()