8.2 Navigationsleiste mit JavaScript  
Die Navigationsleiste des Browsers wird ziemlich häufig benutzt. Vor allem die Schaltflächen Zurück (oder Back), Drucken (oder Print) und Neu laden (oder Aktualisieren, Refresh, Reload) werden angeblich am häufigsten angeklickt. Mit JavaScript kann man diese Funktionalität nachbilden.
8.2.1 Das History-Objekt 
Die History eines Browserfensters oder eines Frames ist nichts weiter als eine Liste der zuvor besuchten Seiten des aktuellen Fensters oder Frames. Beim Internet Explorer gibt es einen eigenen Ordner namens History oder Verlauf, der die globale History, also alle aufgerufenen Seiten enthält, während der Netscape Navigator diese Daten in einer einzelnen Datei ablegt. In Mozilla-Browsern heißt diese Funktionalität zumeist Chronik. Auf die Elemente des History-Objekts haben Sie natürlich keinen Schreibzugriff. Stellen Sie sich vor, eine bösartige Seite würde die gesamte History des Benutzers überschreiben. Egal, ob der Benutzer vor oder zurück will, er würde immer auf der falschen Seite landen. Aber auch der Lesezugriff ist stark eingeschränkt, und zwar aus Sicherheitsgründen. Wenn man mit JavaScript (oder anderen Mitteln) die History-Liste des Benutzers auslesen könnte, wäre der gläserne Benutzer geschaffen. Manchmal werden auch Passwörter und andere vertrauliche Informationen in der URL übertragen; ein Lesezugriff wäre also ein Unding. Mit einem signierten Skript kann man auf diese Werte zugreifen, aber das ist nicht das Thema dieses Kapitels.
Schon interessanter ist es, in der History nach vorn oder hinten zu springen, wie man es auch mit den Schaltflächen in der Navigationsleiste des Browsers machen kann.
Wenn Sie einen englischsprachigen Browser verwenden, haben Sie die Funktionsnamen direkt vor sich: back() springt zurück, forward() nach vorn. Mit dem folgenden Skript wird ein Teil der Navigationsleiste nachgebildet. Beachten Sie, dass Sie zwar auch mit window.history. methode() auf die Methoden des History-Objekts zugreifen können; aber wie bereits schon mehrfach gesagt wurde, kann man das window. auch weglassen.
<html>
<head>
<title>History-Objekt</title>
</head>
<body>
<h1>Navigation mit JavaScript</h1>
<a href="javascript:history.back();">Zurück</a> -
<a href="javascript:history.forward();">Vor</a>
</body>
</html>
Es gibt noch eine weitere Methode des history-Objekts: history.go(). Mit dieser Methode kann man in der History mehr als einen Eintrag vor- oder zurückspringen. Als Parameter wird hierbei angegeben, um wie viel vor (positiver Wert) oder zurück (negativer Wert) gesprungen wird. Statt history.back() kann man also auch history.go(-1) verwenden; history.forward() wird durch history.go(1) ersetzt. Mit history.go(0) wird übrigens die aktuelle Seite neu geladen.
8.2.2 Vorwärts und rückwärts, Teil 2
Jeder Frame (und jeder Iframe) hat seine eigene History. Man kann also problemlos zwischen den Seiten hin- und herspringen, die in einem bestimmten Frame geladen worden sind. Nun kommt es in der Realität aber des Öfteren vor, dass sich der Inhalt mehrerer Frames ändert. Stellen Sie sich vor, Sie haben eine Webseite mit einem Frame für den Inhalt und einem Frame für Werbebanner. Der Werbebanner-Frame wird alle 60 Sekunden neu geladen, während im Inhalts-Frame immer dann neuer Inhalt geladen wird, wenn der Benutzer auf einen Link klickt. Mit den bisherigen Methoden ist es zwar möglich, die History jedes einzelnen Frames zu verfolgen, nicht aber die globale History des Fensters, die aus einer Mischung von Seiten im Inhalts- und im Werbe-Frame besteht.
Bei Netscape- und Mozilla-Browsern hat das window-Objekt ebenfalls die Methoden back() und forward(), die es dem Benutzer erlauben, durch die globale History des Fensters zu navigieren. Der Internet Explorer kennt diese Methoden dagegen nicht. Mit dem folgenden Skript, das am besten in einem Frame platziert wird, kann der Benutzer durch die History des Hauptfensters navigieren:
<html>
<head>
<title>window-Objekt: vorwärts und rückwärts</title>
</head>
<body>
<h1>Navigation mit JavaScript</h1>
<a href="javascript:top.Hauptfenster.back();">Zurück</a> -
<a href="javascript:top.Hauptfenster.forward();">Vor</a>
</body>
</html>
Ihnen fehlt bisher noch das Wissen, wie Sie auf Frames zugreifen können; auch die Syntax top.Hauptfenster.back() kennen Sie noch nicht. Keine Bange: In Kapitel 10 erfahren Sie mehr.
8.2.3 Drucken mit JavaScript
Eine sehr häufige Frage in Newsgroups lautet: Wie kann ich mit JavaScript drucken? Die Antwort ist nur auf den allerersten Blick unbefriedigend: Es ist nicht möglich, automatisch Daten zum Drucker zu senden – stellen Sie sich nur einmal vor, Sie surfen, und plötzlich fängt Ihr Drucker an, unkontrolliert Seiten auszuspucken.
Aber zurück zum Thema: Das Dialogfenster des Drucken-Dialogs kann nicht nur mit dem entsprechenden Menübefehl oder der Schaltfläche in der Navigationsleiste aufgerufen werden. JavaScript unterstützt die Methode print() des window-Objekts, die genau dieses Dialogfenster aufruft. Zwar haben Sie auf den ersten Blick keinen Vorteil gegenüber der Arbeit mit der Navigationsleiste, aber viele Benutzer rufen gern das Kontextmenü des Fensters oder Frames auf und wählen dort den Drucken-Eintrag. Der Netscape Navigator erlaubt so etwas nicht, und seine Benutzer freuen sich sicherlich über den zusätzlichen Komfort, wenn Sie das Drucken mit JavaScript ermöglichen. Weiter unten in diesem Kapitel werden Sie außerdem Fenster ohne Navigationsleiste und ohne Menüleiste kennen lernen. Wer hier nicht die Tastenkombination zum Drucken kennt, hat ein ernsthaftes Problem, den Inhalt des Fensters zu Papier zu bringen. Eine JavaScript-Lösung schafft hier eine Erleichterung.
Im folgenden Beispiel finden Sie zusätzlich eine Überprüfung, ob der Browser die print()-Methode überhaupt unterstützt. Das ist zwar heutzutage nicht mehr notwendig, aber zeigt auf, wie Sie generell bestimmte JavaScript-Fähigkeiten eines Browsers prüfen können.
<html>
<head>
<title>window.print()</title>
<script type="text/javascript"><!--
function drucken(){
if (window.print) {
window.print();
} else {
window.alert("Leider nicht möglich!");
}
}
</head>
<body>
<h1>Drucken mit JavaScript</h1>
<a href="javascript:drucken()">Drucken</a><br>
</body>
</html>
Beachten Sie, dass die Abfrage if (window.print) heißen muss. Damit wird überprüft, ob die Methode window.print() vorhanden ist. Die Abfrage if (window.print()) funktioniert nicht, die Funktion würde – sofern vorhanden – auf jeden Fall ausgeführt werden.
|
