Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 8 Fenster
  gp 8.1 Modale Fenster
    gp 8.1.1 Warnung – nur im Notfall
    gp 8.1.2 Bestätigungen
    gp 8.1.3 Benutzereingaben
  gp 8.2 Navigationsleiste mit JavaScript
    gp 8.2.1 Das History-Objekt
    gp 8.2.2 Vorwärts und rückwärts, Teil 2
    gp 8.2.3 Drucken mit JavaScript
  gp 8.3 Die Statuszeile
    gp 8.3.1 Erläuternde Links
    gp 8.3.2 Laufschrift
  gp 8.4 Das location-Objekt
  gp 8.5 Ein neues Fenster öffnen
    gp 8.5.1 Ein Fenster öffnen und füllen
    gp 8.5.2 Ein Fenster öffnen und verlinken
    gp 8.5.3 Ein Fenster öffnen und anpassen
    gp 8.5.4 Modale Fenster
  gp 8.6 Fernsteuerung
    gp 8.6.1 Links mit JavaScript
    gp 8.6.2 Links ohne JavaScript
  gp 8.7 Fenster schließen
    gp 8.7.1 Andere Fenster schließen
  gp 8.8 Fenster bewegen mit JavaScript
    gp 8.8.1 Fenster verschieben
    gp 8.8.2 Fensterinhalt scrollen


Galileo Computing

8.5 Ein neues Fenster öffnen  downtop

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


Galileo Computing

8.5.1 Ein Fenster öffnen und füllen  downtop

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!


Galileo Computing

8.5.2 Ein Fenster öffnen und verlinken  downtop

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>

Abbildung
Hier klicken, um das Bild zu Vergrößern

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


Galileo Computing

8.5.3 Ein Fenster öffnen und anpassen  downtop

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:

gp  Numerische Werte: Beispielsweise die Höhe oder die Breite; diese haben das Format height=400.
gp  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:


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:

gp  bei Fenstern, deren Höhe oder Breite kleiner als 100 Pixel ist
gp  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.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
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.


Galileo Computing

8.5.4 Modale Fenster  toptop

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>
 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de