Window

Browser-Fenster öffnen & manipulieren

Jede Webseite lässt sich mit Javascript in einem eigenen Browser-Fenster öffnen. Diese Möglichkeit wurde leider für unverlangte Popup-Fenster missbraucht. Diese Seite enthält einige Details zur Herstellung und Verwendung solcher child-Fenster.
Einige Javascript-Funktionen dieser Seite ergeben leider online-Probleme und wurden daher vorläufig abgeschaltet. Die Behebung ist in Arbeit.
Javascript ECMAScript für HTML und XML
Fenster öffnen Beliebige Webseiten in einem eigenen Fenster öffnen
Fenster bewegen Fenster über den Monitor bewegen
Fenster - Funktionen Was kann ein child-Fenster ?

Fenster öffnen
Jede Webseite lässt sich mit Javascript in einem eigenen Fenster öffnen. Klick auf die Taste rechts öffnet eine Mini-Webseite mit der aktuellen Zeit und platziert sie links unten auf ihren Monitor.
Vorteil:
Das neue Fenster ist ein 'echtes' Browser-Fenster. Es bleibt erhalten, wenn der Inhalt seines parent-Fensters ausgetauscht wurde, sogar wenn dieses bereits geschlossen wurde. 		Nachteil:
Das Fenster wird von jedem anderen Fenster überdeckt, welches gerade benutzt (in den Vordergrund gebracht) wird. Es ist dann zwar vorhanden, wird jedoch leicht übersehen.
Rechts der Quellcode (vereinfacht):
♦ Klick auf das <button>-Element löst das Ereignis onclick aus, und damit die Javascript-Funktion fenster_oeffnen.
♦ Die Funktion enthält die Anweisung window.open mit 3 Text-Argumenten:
♦ Das erste Argument enthält den Pfad zu jener Webseite, die geöffnet werden soll.
♦ Das zweite Argument definiert einen beliebigen Fenster-Namen.
♦ Das dritte Argument (optional) enthält Argumente für die Gestaltung und Positionierung des Fensters. 		HTML:
<button onclick="fenster_oeffnen()"> Uhr </button>
Javascript:
function fenster_oeffnen() {
var diezeit = window.open("zeit.php", "Zeit", "width=110,height=150,left=20,top=250");
}

Fenster-Bewegung
Hier wird die gleiche Webseite verwendet wie im Innen-Rahmen rechts, jedoch in einem eigenen Browser-Fenster. Dieses child-Fenster ist von seiner parent-Seite abhängig und kann von dort aus gesteuert werden.
Diese Funktionen werden meist zusammen mit den Monitor-Eigenschaften screen.width, screen.height verwendet.
Demo: open - close 
moveBy - von links oben zur Bildschirm-Mitte.
moveTo - in die 4 Monitor-Ecken (je 2 sec).

Programmierung

♦ Javascript-Methode window.open öffnet ein neues Fenster. Die zurückgegebene Variable (hier demo ) dient als 'Handgriff' (handle) für jeden Zugriff auf das neue Fenster.
♦ Methode moveTo bewegt das Fenster an die bezeichnete Position (hier in die Monitor-Ecken, dann zur Mitte).
♦ Methode moveBy bewegt das Fenster relativ zu seiner aktuellen Position (hier von links oben um je 1px zur Mitte).
♦ Methode focus bringt das Fenster nach vorne. - Wichtig, denn bei jedem Klick in das Hauptfenster wird dieses nach vorne geholt und überdeckt meist das child-Fenster.
♦ Methode close schließt das Fenster.
♦ Programmieren sie Fenster-Positionen nie für ihren eigenen Monitor, sondern lesen sie live die Eigenschaften screen.width, screen.height des tatsächlich verwendeten Monitors !
demo = window.open("demo.htm", "DemoFenster", "width=300,height=250,left=10,top=10");

demo.moveTo(100,200);
demo.moveBy(50,50);
demo.focus();

demo.close();
Tipp:
Gute Browser erlauben auch die CSS-Bewegung von Innenrahmen <iframes>.
Darauf muss hier verzichtet werden, weil M$IE in diesem Fall ein verschiebbares aber leeres Fenster anzeigt.

Fenster - Funktionalität
Mit Klick auf die Taste rechts öffnen sie eine kleine Test-Webseite. Sie erlaubt die Live-Beurteilung einiger wichtiger Eigenschaften von Webseiten.
Eine wichtige Möglichkeit zur Fernsteuerung des child-Fensters ist die Auslösung von Javascript-Funktionen.
Mit den Hyperlinks rechts rufen sie ein kleines Alarmfenster auf, wahlweise auf dieser parent-Seite (window.htm) oder im child-Fenster (test.htm).
Funktionen im child-Fenster können nur dann aufgerufen werden, wenn ein solches Fenster geöffnet ist. 		Hyperlinks:
JS-Funktion auf dieser Seite oder auf der Webseite im Fenster

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript