Kapitel 10 Fenster III

Sie hätte keinen anderen bei sich nicht fensterln und kammerln lassen, und überhaupt sei der Loisl ihr erster gewesen.
– Mostar, Unschuldig

Man kann nicht nur den Inhalt bestehender Fenster verändern, man kann auch gleich neue Fenster erstellen. Das kann sowohl zum Nutzen als auch sehr zum Ärger des Benutzers sein. In diesem Kapitel sehen Sie beides.

Früher war es noch fast unbezahlbar, eine .de-Domain zu registrieren, so dass man schon erwägen musste, eine vergleichsweise günstige .com-Domain zu erwerben. Heutzutage hat sich das umgekehrt: Mehrere Firmen buhlen um Kundschaft und unterbieten sich gegenseitig mit den Preisen. Für den geringen Preis gibt es jedoch oft auch nur geringe Leistungen. Manche Anbieter sind auf die Idee gekommen, als Gegenleistung für den Kampfpreis ein Werbebanner auf den Seiten einzublenden. Damit man das Banner auch besonders gut sieht, wird es in einem eigenen, neuen Fenster angezeigt. Bei Seiten mit besonders zwielichtigem Inhalt wird das auf die Spitze getrieben und es werden sogar mehrere neue Fenster geöffnet, was ich natürlich nur vom Hörensagen weiß.

10.1 Ein neues Fenster öffnen 

Die Methode zum Öffnen eines neuen Fensters heißt window.open(). Dieser Methode werden bis zu drei Parameter übergeben, mindestens jedoch einer.

10.1.1 Ein Fenster öffnen und füllen 

var fenster = window.open(URL, Fenstername, Optionen)

Der erste Parameter, URL, enthält die URL der Seite, die in das neue Fenster geladen werden soll. Ist URL eine leere Zeichenkette, so wird das Fenster zwar geöffnet, aber es wird keine Seite hineingeladen.

Die Position des neuen Fensters lässt sich nur ab Netscape Navigator 4 bestimmen; ansonsten hängt sie vom Browser ab. Die Größe hängt auch vom Browser ab, kann jedoch auch eingestellt werden (siehe weiter unten).

Mit dem folgenden Code wird die Homepage des Galileo Verlags in ein neues Fenster geladen:

var fenster = window.open("http://www.galileo-press.de/")

Verwenden Sie stets window.open(), nicht bloß open().

Die Variable fenster ist eine Referenz auf das neue Fenster. Somit kann auf Eigenschaften des Fensters zugegriffen werden, beispielsweise auf das Objekt location oder auf das Objekt document. Letzteres ist besonders interessant, kann man doch so (mittels write()) den Inhalt des Fensters komplett mit JavaScript erzeugen. Die folgende Funktion öffnet ein neues Fenster und erzeugt in diesem eine HTML-Seite, die den übergebenen Parameter ausgibt.

function tag(s){ return "<"+s+">" }
function neuesfenster(text){
   var fenster = window.open("")
   if (fenster!=null){ //Hat das Öffnen des Fensters geklappt?
      fenster.document.open() //Öffnen für Schreibzugriff, notwendig!
      fenster.document.write(tag("HTML")+tag("BODY"))
      fenster.document.write(tag("H1") + text + tag("/H1"))
      fenster.document.write(tag("/BODY")+tag("/HTML"))
      fenster.document.close() //Schreibzugriff beenden, notwendig!
   }
}

Wie Sie sehen, können Sie mit document.open(), write() und close() rein theoretisch in jedem Fenster jeden beliebigen HTML-Code erzeugen; Anhängen geht nicht, aber Überschreiben ist möglich. Einige Leute haben das recht trickreich ausgenutzt und beispielsweise die Login-Masken mancher Webmail-Dienste mit dieser Methode überschrieben, wodurch sie die Passwörter von ahnungslosen Benutzern ausspionieren konnten. Aus diesem Grund erlauben die neueren Versionen aller Browser nur noch das Überschreiben von Fenstern, deren aktuelle URL von derselben Domain stammt wie das Fenster mit dem Skript.

Einzige Ausnahme: Wird ein Fenster mit window.open("") geöffnet, so kann es vom selben Skript aus mit document.write() beschrieben werden. Die 16-Bit-Version Version 3.03 SP1 des Microsoft Internet Explorer jedoch enthält ein besonderes »Sicherheitsfeature«: Sie können mit window.open("") erzeugte Fenster so nicht mehr verändern; es erscheint dann eine Fehlermeldung! Sie müssen sich hier mit einem kleinen Trick behelfen: Verwenden Sie window.open("http://www.ihrserver.de/leer. html"), und fahren Sie dann wie oben beschrieben fort. Die Datei leer.html kann beliebigen Inhalt haben – der wird ja sowieso überschrieben – aber Sie sollten sich auf ein Standard-HTML-Gerüst beschränken:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
<HTML>

10.1.2 Ein Fenster öffnen und verlinken 

Der zweite Parameter von window.open() gibt den Namen des neuen Fensters an. Man kann diesen Namen – genauso wie bei Frames – als Wert des TARGET-Attributs eines HTML-Links angeben, und das Ziel des Links wird in dem neuen Fenster geöffnet und nicht im aktuellen Fenster. Wenn Sie window.open() zweimal verwenden und dabei einen identischen zweiten Parameter angeben, wird nur ein Fenster geöffnet.

Die folgende Seite öffnet beim Laden ein neues Fenster mit der Homepage des Galileo Verlags. Die anderen Links auf der HTML-Seite öffnen die Homepages einiger Browser-Hersteller – in dem neuen Fenster.

<HTML>
<HEAD>
<TITLE>Neue Fenster</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function neuesfenster(){
  var fenster = window.open("http://www.galileo-press.de", "neu")
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="neuesfenster()">
<H3>Hier einige Links...</H3>
<UL>
<LI><A HREF="http://www.microsoft.com" TARGET="neu">Microsoft</A>
<LI><A HREF="http://www.netscape.com" TARGET="neu">Netscape</A>
<LI><A HREF="http://www.opera.com" TARGET="neu">Opera</A>
</UL>
</BODY>
</HTML>

Abbildung 10.1  Alle Links werden im neuen Fenster geöffnet.

10.1.3 Ein Fenster öffnen und anpassen 

Der letzte Parameter ist gleichzeitig der interessanteste. Hier kann man das Aussehen des neuen Browser-Fensters etwas genauer anpassen. Neben der Höhe und Breite des Fensters kann man auch die meisten Leisten ein- und ausschalten. Es gibt hier zwei Arten von Parametern:

Numerische Werte: Beispielsweise Höhe oder Breite; diese haben das Format height=400.

Ja/Nein-Werte: Beispielsweise Statuszeile einblenden ja/nein. Die Werte yes und 1 oder die bloße Erwähnung der Option bedeuten ja, no und 0 bedeuten nein. Beispiel: status=yes,toolbar=no,menubar.

Sie können natürlich mehrere Parameter zusammen verwenden. Sie müssen diese dazu durch Kommata voneinander trennen, und Sie dürfen keine Leerzeichen verwenden! Der folgende Befehl öffnet ein Fenster, das 400 Pixel breit ist und eine Statuszeile hat:

var fenster = window.open("", "neu", "width=400,status=1")

In Tabelle 10.1 finden Sie die wichtigsten möglichen Parameter. Eine vollständige Auflistung befindet sich in der Referenz.

Wenn einer dieser Parameter nicht angegeben wird, nimmt der JavaScript-Interpreter an, er wäre auf no bzw. 0 gesetzt worden. Der folgende Aufruf erzeugt also ein ganz mageres Fenster:

var fenster = window.open("", "neu", "")

Wie Sie bei den vorherigen Beispielen gesehen haben, fehlt der dritte Parameter komplett, so sieht das neue Fenster gemäß den Standardwerten des Browsers aus. Beim Netscape Navigator beispielsweise entsprechen die Ausmaße und angezeigten Leisten denen des zuletzt aktiven Browser-Fensters.

Kommen wir zu einer der eingangs erwähnten Anwendungsmöglichkeiten zurück: zur Anzeige eines nervigen Werbebanners. Wenn Ihr Werbebanner eine Breite von 200 x 100 Pixeln hat, könnte Ihr Aufruf folgendermaßen aussehen:

<HTML>
<HEAD>
<TITLE>Werbebanner</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function werbebanner(){
   var fenster = window.open("banner.html", "neu", "width=210,
     height=110")
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="werbebanner">
<H1>Werbebanner wird geladen...</H1>
</BODY>
</HTML>

Unter UNIX kann die Größe eines Fensters über X-Ressourcen bestimmt werden, die immer Priorität haben.

Die Datei banner.html kann folgendermaßen aussehen:

<HTML>
<HEAD>
<TITLE>Banner</TITLE>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- kein Abstand zum Fensterrand -->
<A HREF="http://www.ihranzeigenkunde.de" TARGET="_blank">
<IMG SRC="banner.gif" WIDTH=200 HEIGHT=100 BORDER=0>
</A>
</BODY>
</HTML>

Aus Sicherheitsgründen muss ein mit JavaScript geöffnetes Fenster mindestens 100 Pixel hoch und 100 Pixel breit sein. Wenn Sie also für Höhe oder Breite einen Wert kleiner hundert angeben, wird das Fenster trotzdem 100 Pixel breit oder hoch dargestellt. Mit dem Netscape Navigator 4 lässt sich das umgehen, indem man signierte Skripten nutzt. Ebenso können Sie (mit screenX/screenY) ein Fenster nicht aus dem sichtbaren Bereich hinaus verschieben, wenn Sie kein signiertes Skript verwenden.

Mit der folgenden HTML-Seite können Sie einige Parameter für das Aussehen des neuen Fensters anpassen:

<HTML>
<HEAD>
<TITLE>Fenster-Test</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function neuesfenster(formular){
   var optionen="width=400,height=300"
   for (var i=0; i<formular.elements.length; i++){
      if (formular.elements[i].checked) 
         optionen += "," + formular.elements[i].name
   }
   var fenster = window.open("", "neu", optionen)
   if (fenster != null){
      with (fenster.document){
         open()
         write("<"+"HTML"+">"+"<"+"BODY"+">")
         write("Neues Fenster mit folgenden Optionen: "+optionen)
         write("<"+"HR"+">")
         write("<"+"A HREF='javascript:window.close()'"+">")
         write("Fenster schließen"+"<"+"/A"+">")
         write("<"+"/BODY"+">"+"<"+"/HTML"+">")
         close()
      }
   }
}
//--></SCRIPT>
</HEAD>
<BODY>
<H1>Fenster-Optionen auswählen</H1>
<FORM>
<INPUT TYPE="CHECKBOX" NAME="dependent"> dependent<BR>
<INPUT TYPE="CHECKBOX" NAME="directories"> directories<BR>
<INPUT TYPE="CHECKBOX" NAME="hotkeys"> hotkeys<BR>
<INPUT TYPE="CHECKBOX" NAME="location"> location<BR>
<INPUT TYPE="CHECKBOX" NAME="menubar"> menubar<BR>
<INPUT TYPE="CHECKBOX" NAME="scrollbars"> scrollbars<BR>
<INPUT TYPE="CHECKBOX" NAME="status"> status<BR>
<INPUT TYPE="CHECKBOX" NAME="toolbar"> toolbar<BR>
</FORM>
<A HREF="javascript:neuesfenster(document.forms[0])">Fenster
  erzeugen</A>
</BODY>
</HTML>

Abbildung 10.2  Die verschiedenen Fenstereigenschaften können direkt ausprobiert werden.

Beachten Sie bei dem Listing, dass in das neue Fenster neben den Optionen auch ein Link zum Schließen des Fensters geschrieben wird:

<A HREF="javascript:window.close()">Fenster schließen</A>

Das Fenster kann natürlich auch vom aufrufenden Skript aus geschlossen werden; verwenden Sie dazu die Referenz auf das neue Fenster, die von window.open() zurückgegeben wird, in unserem Beispiel also fenster. close().

Ein kurzes Wort noch zu der Zeile if (fenster != null): Es kann sein, dass das Öffnen des neuen Fensters nicht funktioniert hat; insbesondere der Internet Explorer gibt bei wenig Speicher gern eine Fehlermeldung aus und öffnet das Fenster dann nicht.

Anwendungen für die neuen JavaScript-Fenster gibt es viele: Beispielsweise könnten Sie auf Ihren Webseiten eine Hilfefunktion anbieten. Der Hilfetext kann dann in einem neuen Fenster (ohne platzraubende Symbolleisten) dargestellt werden; dies ist insofern praktisch, da der Benutzer nicht auf die Zurück-Schaltfläche seines Browsers klicken muss, um wieder zu der Seite zurückzukehren, auf der er die Hilfe in Anspruch nehmen wollte.

10.1.4 Modale Fenster 

Ein sogenanntes modales Fenster ist die gierige Variante von neuen Fenstern. Das aufrufende Fenster ist praktisch inaktiv, Sie können darauf erst wieder zugreifen, wenn das neue, modale Fenster wieder geschlossen worden ist. Sie haben diese Art von Fenstern schon kennen gelernt, sie werden beispielsweise durch window.alert(), window.confirm() und window.prompt() erzeugt. Die Gestaltungsmöglichkeit dieser Fenster war ja relativ gering, aber ab Browsern der Versionsnummer 4 gibt es Alternativen.

Für den Netscape Navigator gibt es die Fenstereigenschaft alwaysRaised, aber die funktioniert nur in Zusammenarbeit mit so genannten Signierten Skripten (siehe dazu auch das gleich lautende Kapitel). Ab dem Internet Explorer 4 gibt es für Benutzer des Microsoft-Browsers die Möglichkeiten, ein modales Fenster zu erzeugen. Die dazugehörige Methode des Fenster-Objekts heißt showModalDialog(), und in Tabelle 10.2 sehen Sie die dazugehörigen Fenstereigenschaften:

Der folgende Code öffnet also ein modales Fenster im Internet Explorer. Sie können dort beispielsweise einen Hilfetext anzeigen. Wie immer der Warnhinweis: Da dieser Code nur mit dem Internet Explorer funktioniert, sollten Sie darauf achten, dass Ihre Seiten auch ohne die modalen Fenster navigierbar bleiben – außer natürlich, Sie operieren in einem Intranet, und die Firmenpolitik verbietet Netscape-Browser (solche Firmen gibt es tatsächlich).

<SCRIPT LANGUAGE="JavaScript"><!--
var fenster = window.showModalDialog("", "Modal", "dialogHeight=300,
  dialogWidth=400,status=no,resizeable")
//--></SCRIPT>

In Abschnitt 10.4 finden Sie übrigens ein paar Tipps, wie Sie auch unter anderen Browsern eine Art von modalem Fenster erzeugen können.

10.2 10.2 Fernsteuerung 

Wie Sie vom ausrufenden Fenster aus auf das neue Fenster zugreifen können, wissen Sie jetzt. In die andere Richtung ist das leider nicht so einfach, insbesondere, wenn man auch ältere Browser unterstützen will.

Mit JavaScript 1.1 wurde die Fenster-Eigenschaft opener eingeführt, die eine Referenz auf das öffnende Fenster darstellt; auch der Internet Explorer 3 hat diese Eigenschaft übernommen. Mit JavaScript 1.0 kann man sie jedoch relativ einfach nachbilden. In diesem Falle ist die Eigenschaft opener des neuen Fensters gleich null, und man kann sie auf das aktuelle Fenster (also self) setzen:

<SCRIPT LANGUAGE="JavaScript"><!--
var fenster = window.open("seite.htm", "neu")
if (fenster.opener==null)
   fenster.opener = self
//--></SCRIPT>

10.2.1 Links mit JavaScript 

Über die Methode opener ist es möglich, auf das ursprüngliche Fenster zuzugreifen. Im Folgenden soll eine Fernsteuerung entwickelt werden. Ausgangspunkt ist folgendes Frameset:

<HTML>
<HEAD>
<TITLE>Fernsteuerung</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function inhalt(){ return "<"+"HTML"+">"+"<"+"/HTML"+">" }
//--></SCRIPT>
</HEAD>
<FRAMESET ROWS="100,*">
   <FRAME SRC="navi.html" NAME="navigation">
   <FRAME SRC="javascript:top.inhalt()">
</FRAMESET>
<NOFRAMES>
<BODY>Ihr Browser kann mit Frames nicht anfangen!</BODY>
</NOFRAMES>
</HTML>

Die Datei navi.html sieht folgendermaßen aus:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function fernsteuerung(){
   var fenster = window.open("remote.html", "fern", "height=200,
     width=400,status=1")
   if (fenster.opener == null)
      fenster.opener = self
}
//--></SCRIPT>
<BODY>
<A HREF="javascript:fernsteuerung()">Fernsteuerung öffnen</A>
</BODY>
</HTML>

Es passiert also nichts Weltbewegendes: Durch den Klick auf den Link wird ein neues Fenster mit der Datei remote.html geladen. Diese sieht folgendermaßen aus:

<HTML>
<HEAD>
<TITLE>Fernsteuerung</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function lade(seite){
   //kommt noch...
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Meine Lieblingslinks</H3>
<UL>
<LI><A HREF="javascript:lade('http://www.microsoft.com')">Microsoft</A>
<LI><A HREF="javascript:lade('http://www.netscape.com')">
  Netscape</A>
<LI><A HREF="javascript:lade('http://www.opera.com')">Opera</A>
</UL>
<A HREF="javascript:window.close()">Fenster schließen</A>
</BODY>
</HTML>

In der Funktion lade() muss die übergebene URL in den unteren Frame der Beispielsseite geladen werden. Mit der Eigenschaft window.opener hat man eine Referenz auf den oberen Frame, und – wie im Kapitel »Fenster II« gezeigt – kann man dann auf den unteren Frame zugreifen:

function lade(seite){
   if (window.opener!=null)
      window.opener.parent.frames[1].location.href = seite
}

10.2.2 Links ohne JavaScript 

Eigentlich ist dieses Vorgehen zu umständlich. Man kann auch mit ordinären HTML-Links arbeiten. Als TARGET-Attribut gibt man den Namen des Frames bzw. des Fensters an, in den bzw. das die neue Seite geladen werden soll.

Im obigen Beispiel wurde jedoch aus Versehen kein Name für den Frame angegeben; bei Fenstern haben Sie ja ohnehin standardmäßig keinen Namen. Mit JavaScript lässt sich dieser Name jedoch ganz einfach vergeben; die entsprechende Eigenschaft heißt name.

Ändern Sie also die Funktion fernsteuerung() folgendermaßen ab:

function fernsteuerung(){
   var fenster = window.open("remote.html", "fern", "height=200,
     width=400,status=1")
   self.name = "Ziel"

   if (fenster.opener == null)
      fenster.opener = self
}

Die Fernsteuerung besteht dann aus (beinahe) reinem HTML-Code:

<HTML>
<HEAD>
<TITLE>Fernsteuerung</TITLE>
</HEAD>
<BODY>
<H3>Meine Lieblingslinks</H3>
<UL>
<LI><A HREF="http://www.microsoft.com" TARGET="Ziel">Microsoft</A>
<LI><A HREF="http://www.netscape.com" TARGET="Ziel">Netscape</A>
<LI><A HREF="http://www.opera.com" TARGET="Ziel">Opera</A>
</UL>
<A HREF="javascript:window.close()">Fenster schließen</A>
</BODY>
</HTML>

10.3 Fenster schließen 

Wie Sie bereits gesehen haben, kann ein Fenster mit Fensterreferenz.close() geschlossen werden. Es gibt jedoch eine Einschränkung: Laden Sie doch einmal folgende HTML-Seite in Ihren Browser:

<HTML>
<HEAD>
<TITLE>window.close()</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
window.close()
</SCRIPT>
</BODY>
</HTML>

Sie sollten eine Warnung erhalten (zumindest ab Netscape Navigator 3 bzw. Internet Explorer 4). Das wäre ja auch noch schöner, wenn man mit JavaScript jedes beliebige Fenster schließen könnte. Fenster, die mit JavaScript geöffnet wurden, können jedoch problemlos geschlossen werden, wie Sie im vorherigen Abschnitt ja schon gesehen haben.

Abbildung 10.3  Warnmeldung beim Schließen eines Fensters,
das nicht mit JavaScript geöffnet worden ist

10.3.1 Andere Fenster schließen 

Etwas komplizierter ist es jedoch, wenn ein anderes Fenster geschlossen werden soll. Angenommen, der Benutzer schließt das Fenster mit der systemspezifischen Tastenkombination (unter Windows beispielsweise mit (Alt)+(F4)). Die Variable, in der eine Referenz auf das Fenster abgespeichert ist, verschwindet dadurch ja nicht. Ist das Fenster also schon geschlossen, würde Fensterreferenz.close() eine Fehlermeldung ausspucken.

Die Fernsteuerung soll so abgeändert werden, dass sie von der Hauptseite aus wieder geschlossen werden kann. Ab Netscape Navigator 3 gibt es die Fenstereigenschaft closed, einen Booleschen Wert, der angibt, ob das Fenster noch offen ist oder nicht. Somit kann die Datei navi.html folgendermaßen geändert werden, damit die gewünschte Funktionalität sichergestellt wird:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var fenster //Variable muss global sein!

function fernsteuerung(){
   fenster = window.open("remote.html", "fern", "height=200,

     width=400,status=1")

   self.name = "Ziel"
   if (fenster.opener == null)
      fenster.opener = self
}
function schliessen(){

   if (fenster && !fenster.closed)

      fenster.close()

}

//--></SCRIPT>
<BODY>
<A HREF="javascript:fernsteuerung()">Fernsteuerung öffnen</A><BR>

<A HREF="javascript:schliessen()">Fernsteuerung schließen</A>

</BODY>
</HTML>

Das Kernstück ist die Abfrage if (fenster && !fenster.closed). Wie Sie bereits wissen, werden Boolesche Ausdrücke in JavaScript von links nach rechts ausgewertet. Wurde also noch kein Fenster geöffnet, wird der rechte Teil der Bedingung gar nicht mehr überprüft, und es kommt auch keine Fehlermeldung. Falls schon einmal ein Fenster geöffnet wurde, wird der rechte Teil überprüft. Ist die Eigenschaft fenster.closed gleich false, muss das Fenster noch offen sein, also wird es geschlossen.

10.3.2 Lösung für ältere Browser 

Für Internet Explorer 3 und Netscape Navigator 2 muss man sich etwas besonderes einfallen lassen. Eine zuverlässige Lösung ist folgende: Bevor versucht wird, das Fenster zu schließen, wird es noch einmal geöffnet, und zwar mit demselben zweiten Parameter (Fensternamen) wie zuvor. Wie Sie bereits wissen, wird genau dann kein neues Fenster geöffnet, wenn das alte noch offen ist. Das Ergebnis dieser Aktion ist aber klar: Es existiert auf jeden Fall ein (offenes) Fenster, das dann geschlossen werden kann.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var fenster //Variable muss global sein!
function fernsteuerung(){
   fenster = window.open("remote.html", "fern", "height=200,
     width=400,status=1")
   self.name = "Ziel"
   if (fenster.opener == null)
      fenster.opener = self
}
function schliessen(){

   fenster = window.open("", "remote", "height=200,width=400")

   if (fenster)

      fenster.close()

}

//--></SCRIPT>
<BODY>
<A HREF="javascript:fernsteuerung()">Fernsteuerung öffnen</A><BR>
<A HREF="javascript:schliessen()">Fernsteuerung schließen</A>
</BODY>
</HTML>

Einen kleinen Preis muss man jedoch zahlen: Man sieht ein kurzes Flackern des Fensters. Es wäre also effizienter, nur beim Netscape Navigator 2 und beim Internet Explorer 3 das Fenster (evtl. erneut) zu öffnen. Der Code wird dadurch zwar ein wenig hässlicher, aber bei einer Großzahl von Nutzern wird das Fenster ohne Störungen geschlossen.

function schliessen(){
   NN2 = (navigator.userAgent.indexOf("mozilla")!=
-1&&parseInt(navigator.appVersion)==2)
   IE3 = (navigator.userAgent.indexOf("msie")!=
-1&&parseInt(navigator.appVersion)<4)
   if (NN2||IE3)
      fenster = window.open("", "remote", "height=200,width=400")
   if (fenster && !fenster.closed)
      fenster.close()
}

10.4 Fenster in den Vordergrund holen 

Mit der Fensteroption alwaysRaised kann man im Netscape Navigator ab Version 4 einstellen, dass das neue Fenster immer vor allen anderen Browser-Fenstern erscheinen soll – aber das geht wie gesagt nur beim Netscape Navigator, und außerdem braucht man ein signiertes Skript. Man kann diesen Effekt jedoch relativ leicht nachbilden. Sie erinnern sich vielleicht an das Kapitel über Formularfelder (»Formulare I«). Dort stand folgender Code in einem Texteingabefeld, das schreibgeschützt werden sollte: onFocus="this.blur()". In unserem Fall wird genau das Gegenteil benötigt: Wenn das Fenster den Focus verliert, soll es ihn wieder erhalten!

Es reicht natürlich beinahe, einfach die beiden Begriffe auszutauschen:

<BODY onBlur="if (window.focus) window.focus()">

Die Abfrage hat folgenden Hintergrund: window.focus() gibt es erst ab Netscape Navigator 3 und Internet Explorer 4. Bei älteren Browsern kann man die Fehlermeldung aber ganz einfach abfangen: window.focus (ohne Klammern!) gibt dann false zurück.

Bevor Sie dieses Skript jedoch exzessiv einsetzen, denken Sie zweimal nach. Wenn sich ein Fenster stets in den Vordergrund drängt, wird es ganz schnell abgeschossen (sprich: geschlossen). Es gibt kaum eine Anwendung, in der so ein Fensterverhalten angebracht wäre.

Der Sinn des ganzen Exkurses: Ihnen ist vielleicht aufgefallen, dass die Fernsteuerung natürlich nicht mehrmals geöffnet wird, wenn Sie mehrmals auf den Fernsteuerungslink klicken (warum?); aber sie verschwindet beim zweiten Öffnen in den Hintergrund bzw. kommt nicht in den Vordergrund wie beim ersten Öffnen. In diesem Fall kann window.focus() wirklich sinnvoll eingesetzt werden. Ändern Sie die Funktion fernsteuerung() folgendermaßen ab:

function fernsteuerung(){
   (if !fenster && fenster.closed){

      fenster = window.open("remote.htm", "fern", "height=200,
        width=400,status=1")
      self.name = "Ziel"
      if (fenster.opener == null)
         fenster.opener = self
} else {

   if (fenster.focus) fenster.focus()

}

10.5 Fenster bewegen mit JavaScript 

Prinzipiell gibt es zwei Möglichkeiten, ein Fenster zu bewegen, und das ist reine Definitionssache. Entweder wollen Sie das gesamte Fenster irgendwo hinbewegen, oder Sie wollen den Inhalt des Fensters scrollen. Beides ist mit neueren Browsern möglich und wird an dieser Stelle kurz vorgestellt.

10.5.1 Fenster verschieben 

Eine häufig gestellte Frage lautet: Wie kann ich das Browser-Fenster zentrieren? Andere Leute wiederum möchten, dass das Browser-Fenster maximiert oder minimiert wird (soviel vorweg, das ist nicht möglich), oder sich am oberen Bildschirmrand befindet. Dies ist kein aufwendiges Verfahren, es müssen einfach entsprechende Eigenschaften des window-Objekts gesetzt oder ausgelesen oder Methoden aufgerufen werden. Übertreiben Sie es jedoch nicht mit diesen Effekten. Viele Webbesucher reagieren ziemlich giftig, wenn man ihnen vorschreiben will, wo sich ein Fenster befindet.

Der Netscape Navigator (ab Version 4) kann ein Fenster verschieben, und zwar sowohl an eine bestimmte Position als auch um einen gewissen Wert. Dazu gibt es zwei Methoden:

window.moveTo(x, y): Verschiebt das Fenster so, dass die linke obere Ecke die Koordinaten (x, y) hat. Es handelt sich hier um eine absolute Verschiebung. Sie können das Fenster damit nicht aus dem sichtbaren Bereich hinaus verschieben, außer Sie verwenden signierte Skripten (die werden gegen Ende des Buches vorgestellt).

window.moveBy(x, y): Verschiebt das Fenster horizontal um x Pixel, vertikal um y Pixel, also eine relative Verschiebung. Auch hier kann das Fenster nicht aus dem sichtbaren Bereich hinaus verschoben werden.

Erinnern Sie sich noch an die Auflistung der Parameter für window. open()? All diese Parameter sind auch gleichzeitig Eigenschaften für das window-Objekt. Somit werden beispielsweise mit window.outerHeight und window.outerWidth die Ausmaße des Browser-Fensters angegeben.

Um nun die Maximierung eines Fensters zu simulieren (man führt damit nicht die API-Funktion für die Fenstermaximierung aus, sondern vergrößert das Fenster nur entsprechend), muss man noch die Ausmaße des Bildschirms bestimmen. Seit JavaScript 1.2 kann man diese Werte aus dem screen-Objekt erhalten:

screen.availWidth enthält die Bildschirmbreite.

screen.availHeight enthält die Bildschirmhöhe.

Eine Funktion zum Maximieren des Fensters sieht also folgendermaßen aus. Die linke obere Ecke des Fensters wird zunächst an die linke obere Ecke des Bildschirms gesetzt, und dann wird das Fenster entsprechend vergrößert.

function maximieren(){
   window.moveTo(0, 0)
   window.outerHeight = screen.availHeight
   window.outerWidth = screen.availWidth
}

10.5.2 Fensterinhalt scrollen 

Schon mit JavaScript Version 1.1 wurden Methoden zum Scrollen des Fensterinhalts eingeführt. Die dazugehörige Methode heißt window. scroll(x, y). Sie scrollt den Fensterinhalt an die angegebenen Koordinaten. Es ist eigentlich unlogisch, dass das Scrollen eine Methode des window-Objekts ist, da ja nicht das Fenster gescrollt wird, sondern das Dokument, das sich darin befindet. Auch hier gilt: Übertreiben Sie es nicht. Der Benutzer ärgert sich immer, wenn er das Gefühl hat, nicht die Kontrolle über ein Fenster zu besitzen. Scrollen Sie also nur dann, wenn es wirklich Sinn macht.

Eine der möglichen Anwendungen besteht darin, nach oben zu scrollen. Auf vielen, längeren Webseiten finden Sie einen Link, der nach oben scrollt – Sie ersparen Ihren Benutzern so die Mühe, mit der Maus den Scrollbalken zu treffen. Dieser Effekt wird meistens so angeboten:

<A HREF="#top">nach oben</A>

Am Anfang des Dokuments befindet sich dann eine Textmarke namens "top", zu der dann gescrollt wird. Das ist ein netter Effekt, vor allem bei längeren Dokumenten. Zum einen jedoch ändert sich die URL – was Neulinge immer stark irritiert, man glaubt es kaum – und zum anderen ist es bei komplexeren Dokumenten nicht immer möglich, ganz oben eine Textmarke unterzubringen, Wenn beispielsweise direkt nach dem <BODY>-Tag ein Werbebanner eingefügt wird (das hat der Gratis-Hoster Hypermart früher so gemacht), kann man nie nach ganz oben scrollen.

Mit JavaScript 1.1 geht das Scrollen an den Dokumentenanfang ganz bequem. Es muss einfach zu den Koordinaten (0, 0) gescrollt werden. Damit es bei älteren Browsern keine Fehlermeldung gibt, kann man beispielsweise Folgendes versuchen:

<A HREF="javascript:if (window.scroll) 
window.scroll(0, 0)">nach oben</A>

Dann wäre der Link jedoch inaktiv, wenn der Benutzer einen älteren Browser (zum Beispiel Internet Explorer 3) verwendet. Aus diesem Grund sollte man hier den Link mit document.write() erzeugen.

<SCRIPT LANGUAGE="JavaScript1.1"><!--
function tag(s) { return "<"+s+">" }
document.write(tag("A HREF='javascript:window.scroll(0, 0)'")+
  "nach oben"+tag("/A"))
//--></SCRIPT>

Wie bereits erwähnt, verbietet sich das jedoch innerhalb einer Tabellenzelle. So ist die folgende Lösung wohl die optimale: Es existiert auch eine Textmarke, aber wenn der Browser die scroll-Methode unterstützt, wird diese verwendet:

<A HREF="#top" onClick="if (window.scroll) {window.scroll(0, 0);
  return false}">nach oben</A>

Netscape hat mit JavaScript 1.2 bzw. seiner Version 4 zwei neue Methoden eingeführt. Dabei verhält sich window.scrollTo(x, y) identisch zu window.scroll(x, y), während window.scrollBy(x, y) neu ist: Genau so wie bei window.moveBy(x, y) wird hier relativ gescrollt.

Die Methoden zum Scrollen werden im Zusammenhang mit der exakten Positionierung von HTML-Dokumenten bei DHTML noch interessant werden; fürs erste aber sollte dieser Einblick genügen.

10.6 Fragen & Aufgaben