8.5 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.
8.5.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 per JavaScript 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 von Galileo Press 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, weil man so (mittels write()) den Inhalt des Fensters komplett mit JavaScript erzeugen kann. 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, Pflicht!
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, Pflicht!
}
}
Wie Sie sehen, können Sie mit document.open(), write() und close() rein theoretisch in jedem Fenster jeden beliebigen HTML-Code erzeugen; das Anhängen geht nicht, aber ein Ü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. Es ist also beispielsweise unmöglich, ein unauffälliges Überwachungsfenster zu öffnen, das sich im Hintergrund hält und nur darauf wartet, dass in einem anderen Browserfenster ein Webmail-Anbieter besucht wird, um dann aktiv zu werden.
Popup-Blocker sind sehr populär, die meisten Webbrowser haben mittlerweile einen. Sie können sich also nicht darauf verlassen, dass sich das neue Fenster beim Besucher auch tatsächlich öffnet!
8.5.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 von Galileo Press. Die anderen Links auf der HTML-Seite öffnen die Homepages einiger Browserhersteller – in dem neuen Fenster.
<html>
<head>
<title>Neue Fenster</title>
<script type="text/javascript"><!--
function neuesfenster() {
var fenster = window.open("http://www.galileo-press.de/", "neu");
}
//--></script>
</head>
<body onload="neuesfenster()">
<h1>Hier einige Links...</h1>
<ul>
<li>
<a href="http://www.microsoft.com/"
target="neu">Microsoft</a>
</li>
<li>
<a href="http://www.mozilla.com/"
target="neu">Mozilla</a>
</li>
<li>
<a href="http://www.opera.com/"
target="neu">Opera</a>
</li>
</ul>
</body>
</html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 8.7 Alle Links werden im neuen Fenster geöffnet.
8.5.3 Ein Fenster öffnen und anpassen
Der letzte Parameter ist gleichzeitig der interessanteste. Hier kann man das Aussehen des neuen Browserfensters 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 die Höhe oder die 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");
Die folgende Tabelle enthält alle an- bzw. ausblendbaren Elemente.
Tabelle 8.1 Die (booleschen) Optionen für window.open()
| Option
|
Beschreibung
|
Besonderheiten
|
| alwaysLowered
|
Das Fenster befindet sich immer im Hintergrund an/aus
|
Netscape; nur bei Verwendung von Signed Scripts (signierte Skripten)
|
| alwaysRaised
|
Das Fenster befindet sich immer im Vordergrund an/aus
|
Netscape; nur bei Verwendung von Signed Scripts (signierte Skripten)
|
| channelmode
|
Anzeige der Channelleiste an/aus
|
Internet Explorer
|
| dependent
|
Fensterabhängigkeit an/aus (wird das aufrufende Fenster geschlossen, so wird auch das geöffnete Fenster geschlossen)
|
Netscape
|
| directories
|
Persönliche Symbolleiste (Netscape) bzw. Links-Leiste (Internet Explorer) an/aus
|
–
|
| fullscreen
|
Anzeigen des neuen Fensters im Vollbildmodus an/aus
|
Internet Explorer
|
| hotkeys
|
Hotkeys (z. B. Drucken: (Strg)+(P)) an/aus
|
Netscape
|
| location
|
Adressleiste an/aus
|
–
|
| menubar
|
Menüleiste an/aus
|
–
|
| personalbar
|
Persönliche Symbolleiste an/aus
|
Netscape; entspricht dort der Option directories
|
| resizable
|
Fenster in der Größe veränderbar an/aus
|
–
|
| scrollbars
|
Scrollleisten an/aus
|
–
|
| status
|
Statusleiste an/aus
|
–
|
| titlebar
|
Titelleiste an/aus
|
Netscape; nur bei Verwendung von Signed Scripts (signierten Skripten)
|
| toolbar
|
Werkzeugleiste an/aus
|
–
|
| z-lock
|
Fenster verbleibt auch mit Fokus im Hintergrund an/aus
|
Netscape; nur Signed Scripts (signierte Skripten)
|
Des Weiteren stehen die folgenden numerischen Elemente zur Verfügung:1
Tabelle 8.2 Die (numerischen) Optionen für window.open()
| Option
|
Beschreibung
|
Besonderheiten
|
| height
|
Höhe des Fensters
|
mindestens 100 Pixel oder (unter Netscape) Signed Script (signiertes Skript)
|
| width
|
Breite des Fensters
|
mindestens 100 Pixel oder (unter Netscape) Signed Script (signiertes Skript)
|
| innerHeight
|
Höhe des sichtbaren Browserbereichs (also ohne Symbolleisten, Scrollbalken etc.)
|
Netscape
|
| innerWidth
|
Breite des sichtbaren Browserbereichs (also ohne Symbolleisten, Scrollbalken etc.)
|
Netscape
|
| outerHeight
|
Höhe des Fensters
|
Netscape; entspricht height
|
| outerWidth
|
Breite des Fensters
|
Netscape; entspricht width
|
| left
|
x-Koordinate1 der linken oberen Ecke des Fensters
|
Internet Explorer; muss im sichtbaren Bereich des Bildschirms liegen
|
| top
|
y-Koordinate1 der linken oberen Ecke des Fensters
|
Internet Explorer; muss im sichtbaren Bereich des Bildschirms liegen
|
| screenX
|
x-Koordinate1 der linken oberen Ecke des Fensters
|
Netscape; muss (ohne Signed Script/signiertes Skript) im sichtbaren Bereich des Bildschirms liegen
|
| screenY
|
y-Koordinate1 der linken oberen Ecke des Fensters
|
Netscape; muss (ohne Signed Script/signiertes Skript) im sichtbaren Bereich des Bildschirms liegen
|
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", "");
Aus Kompatibilitätsgründen sollten Sie zwischen den einzelnen Optionen – die Sie frei miteinander kombinieren können – keine Leerzeichen einsetzen.
Wie Sie in den vorangegangenen Beispielen gesehen haben, fehlt der dritte Parameter komplett. So sieht das neue Fenster gemäß den Standardwerten des Browsers aus. Beim den meisten modernen Browsern entsprechen die Ausmaße und angezeigten Leisten denen des zuletzt aktiven Browserfensters.
Auch bei einigen derjenigen Attribute, die (unter Mozilla-Browsern) keine signierten Skripten voraussetzen, kann unter bestimmten Voraussetzungen ein signiertes Skript verlangt werden:
| |
bei Fenstern, deren Höhe oder Breite kleiner als 100 Pixel ist |
| |
bei einem Fenster, das vollständig oder größtenteils außerhalb des sichtbaren Bereichs liegt |
Der Internet Explorer ignoriert diese Angaben stets. Wenn unter Mozilla die besonderen Rechte für ein signiertes Script nicht angefordert wurden, wird die Option ebenfalls ignoriert. Ein Versuch, ein Fenster ohne Titelleiste zu öffnen, führt bei beiden Browsern zu einem neuen Fenster, und zwar mit Titelleiste.
Wenn Sie unter Netscape die besonderen Fensteroptionen benötigen, müssen Sie zunächst die entsprechenden Rechte vom Benutzer anfordern:
netscape.security.PrivilegeManager.enablePrivilege(
"UniversalBrowserWrite");
window.open("", "", "width=50,height=50");
netscape.security.PrivilegeManager.disablePrivilege(
"UniversalBrowserWrite");
Damit das überhaupt funktioniert, muss Java im Browser aktiviert sein, da der Privilege Manager auf Java-Basis arbeitet.
Wenn der Benutzer die Sicherheitsabfrage akzeptiert, wird tatsächlich ein 50 Pixel hohes Fenster geöffnet – nur ist es ein wenig breiter als 50 Pixel, da die drei Windows-Schaltflächen zum Minimieren, Maximieren und Schließen des Fensters zu viel Platz wegnehmen. Um ein wirklich 50*50 Pixel großes Fenster zu erhalten, müssen Sie zusätzlich noch die Titelleiste ausblenden:
netscape.security.PrivilegeManager.enablePrivilege(
"UniversalBrowserWrite");
window.open("","", "width=50,height=50,titlebar=no");
netscape.security.PrivilegeManager.disablePrivilege(
"UniversalBrowserWrite");
Wie Sie im Browser sehen können, ist es eine gute Idee der Mozilla-Entwickler gewesen, bei der Verwendung dieser Fensteroptionen die Zustimmung des Benutzers einzuholen. Das neue Fenster ist kaum mehr sichtbar.
Kehren wir zu einer der eingangs erwähnten Anwendungsmöglichkeiten zurück: zur Anzeige eines nervigen Werbebanners. Wenn Ihr Werbebanner eine Breite von 200 × 100 Pixeln hat, könnte Ihr Aufruf folgendermaßen aussehen:
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 (Sie benötigen zusätzlich noch eine Bannergrafik banner.gif):
<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>
Man kann es nicht oft genug erwähnen: 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 Mozilla-Browsern lässt sich das (sehr mühsam) umgehen, indem man signierte Skripten nutzt. Ebenso können Sie (mit screenX/screenY) ein Fenster nicht vollständig 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. Details dazu (und ein ausführlicheres Beispiel) erhalten Sie im nächsten Kapitel, in dem die Auswertung von Formulardaten behandelt werden wird.
<html>
<head>
<title>Fenster-Test</title>
<script type="text/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.document2 ) {2
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>
Hier klicken, um das Bild zu Vergrößern
Abbildung 8.8 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 freiem 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 Platz raubende Symbolleisten) dargestellt werden; dies ist insofern praktisch, als 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.
8.5.4 Modale Fenster
Ein so genanntes 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 Mozilla-Browser gibt es die Fenstereigenschaft alwaysRaised, aber die funktioniert nur in Zusammenarbeit mit so genannten signierten Skripten (siehe dazu auch Kapitel 29). Ab dem Internet Explorer 4 gibt es für Benutzer des Microsoft-Browsers die Möglichkeit, ein modales Fenster zu erzeugen. Die dazugehörige Methode des Fenster-Objekts heißt showModalDialog(), und in der folgenden Tabelle sehen Sie die dazugehörigen Fenstereigenschaften:
Tabelle 8.3 Fensteroptionen für modale Fenster
| Option
|
Typ
|
Beschreibung
|
| center
|
Ja/Nein
|
Das neue Fenster wird zentriert dargestellt
(Standard).
|
| dialogHeight
|
numerisch
|
Höhe des Fensters in Pixeln
|
| dialogLeft
|
numerisch
|
Abstand vom linken Bildschirmrand in Pixeln
|
| dialogTop
|
numerisch
|
Abstand vom oberen Bildschirmrand in Pixeln
|
| dialogWidth
|
numerisch
|
Breite des Fensters in Pixeln
|
| help
|
Ja/Nein
|
Ein Hilfesymbol (Fragezeichen) wird angezeigt (Standard) bzw. nicht angezeigt.
|
| status
|
Ja/Nein
|
Die Statuszeile wird ein- (Standard) oder aus-geblendet.
|
| resizeable
|
Ja/Nein
|
Die Größe des Fensters kann vom Benutzer ge-ändert bzw. nicht geändert (Standard) werden.
|
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 man in Ihren Seiten auch ohne die modalen Fenster navigieren kann – außer natürlich, Sie operieren in einem Intranet und die Firmenpolitik verbietet Netscape-Browser (solche Firmen gibt es immer häufiger).
<script language="JavaScript"><!--
var fenster = window.showModalDialog("", "Modal",
"dialogHeight=300,dialogWidth=400,status=no,resizeable");
//--></script>
|
