JavaScript - rund um die Navigation

Die Navigation auf einer Webseite ist eines der wichtigsten Bestandteile der Seite überhaupt. Diese Binsenweisheit sollte sich der Web-Programmierer nicht nur hinter die Ohren schreiben, sondern auch noch in Form von HTML-Tags in die Tastatur "hacken". Mit den zunehmend komplexer werdenden Webseiten werden auch die Anforderungen an die Navigation größer. JavaScript ist hier nur eine der Sprachen, die für die Navigation gerne verwendet werden. Flash bzw. ActionScript, DHTML und die serverseitigen Sprachen sind die anderen.

Wie so vieles hat auch die reine JS-Navigation einige Vor- und Nachteile:

Vorteile

Die Möglichkeiten einer JavaScript-Navigation sind wesentlich vielfältiger. Die Navigation läßt sich bequem in Popup-Menüs verpacken, unter denen dann der Besucher einen Punkt auswählt. Somit wird Platz gespart und ein umfangreiches Web-Projekt erscheint übersichtlicher. Zudem wird keine zusätzliche Rechenleistung vom Server benötigt. JS erlaubt auch das vernünftige Navigieren mit Frames: mehrere Frames können gleichzeitig ihre Inhalte ändern. Feste Inhalte bleiben in ihren eigenen Frames und müssen dadurch nicht immer neu geladen werden - das spart Downloadzeit.

Eine JS-Navigation kann sogar in gewissen Grenzen dynamisch sein.

Für alle, die JS nicht aktiviert haben, kann mit dem <noscript>-Tag eine Alternativnavigation eingebaut werden.

Nachteile

Damit eine JS-Navigation funktioniert, muß JavaScript natürlich aktiviert sein. Dies ist trotz der großen Verbreitung JS-fähiger Browser nicht immer der Fall. So wird gerade bei Seiten mit viel Werbung JavaScript abgeschaltet, um Popup-Fenster und andere lästige Spielereien zu unterdrücken. Eine Webseite, bei der die Links nicht funktionieren, wirkt automatisch unprofessionell, egal wie gut Texte und Grafiken sind.

Ein Einsatz von <noscript> ist zwar möglich, aber letztendlich muß dann die Navigation immer zweimal gepflegt werden. Dies kann auf Dauer sehr ermüdend werden.

Die erste Navigation

Soweit einige Vor- und Nachteile. Die Beispiele werden auch mit der Alternativnavigation ausgestattet.

Ein wichtiges Motto beim Erstellen einer Navigation ist: Keep it simple, keep it straight. Eine gute Navigation hat immer den Spagat zwischen schneller Erreichbarkeit der gewünschten Seite und einer Beschränkung auf das wesentliche zu leisten. Ein (selbsternannter) Webdesign-Guru hat einmal behauptet, die Hauptnavigation dürfe nur fünf bis acht Navigationspunkte haben. Da gerne voneinander abgeschrieben wird, hat sich diese Weisheit weit verbreitet. Allerdings genügt meistens schon ein objektiver Blick mit dem Auge, um festzustellen, ob die Navigation überladen ist, oder nicht.

Wichtig ist aber immer die Erreichbarkeit. Wer aber nicht gerade an Web-Ungetümen wie der Microsoft-Homepage beteiligt ist, wird damit vermutlich weniger Probleme haben.

Die jetzt beschriebene Navigation ist vielleicht aus Web-Formularen bekannt und wird als Auswahlliste oder Popup-Menü bezeichnet. In einer geschlossenen Auswahlliste ist immer nur ein Eintrag zu sehen. Die Themen in der Auswahlliste sind optisch einander zugeordnet, sollten also nicht völlig unterschiedlich sein. Der Eintrag, der am Anfang zu sehen ist, steht letztlich optisch für das ganze Menü. Ein kurzes, eher schlechtes Beispiel, sehen Sie in Bild 1. Eine Lösung wäre das Einfügen von Trennlinien. Diese sehen zwar auch nicht gerade umwerfend aus, sorgen aber für eine Abgrenzung der eigenen Punkte. "Leider" können HTML-Tags nicht innerhalb von <OPTION>...</OPTION> verwendet werden.

Widmen wir uns dem HTML-Teil der Navigation, der da lautet:

<HTML>
<HEAD>
<TITLE>Navigation - 1</TITLE>
</HEAD>
<form action="" name="Navigation">
<select name="jahre" size="1">
<option value="">Bitte wählen Sie aus</option>
<option value="1980">1980 - TI/994a, ZX80</option>
<option value="1981">1981 - Sinclair ZX81, IBM PC</option>
<option value="1982">1982 - C64, ZX Spectrum</option>
<option value="1983">1983 - Atari XL</option>
<option value="1984">1984 - Jack is Back</option>
</select>
</form>
</HTML>

Mit dem Betätigen eines Auswahlpunktes soll sofort eine neue Seite geöffnet werden, die Informationen zum entsprechenden Jahr anzeigt. Damit die Liste nicht zur etwas eintönigen Aufzählung von Jahren verkommt, werden noch die "Highlights" des Jahres hinzugefügt.

Die JavaScript-Routine muß zwei Sachen vollbringen:

onChange="angeklickt()"

Die Ergänzung bedeutet, das sobald ein anderer Eintrag ausgewählt wurde, die Funktion angeklickt() aufgerufen werden soll. Natürlich soll beim ersten Eintrag nichts passieren, er dient lediglich als kleine "Hilfe" für den Besucher.

Der JavaScript-Teil ist recht schnell zusammengestellt. Im <HEAD>-Bereich wird eingefügt:

<SCRIPT>
<!--
function angeklickt() {
a=document.Navigation.jahre.options[document.Navigation.jahre.
options.selectedIndex].value;
if (a!="") {
document.location.href="http://www.hchistory.de/"+a+".php3";
}
}
//--></SCRIPT>

Mit document.Navigation.jahre.options wird zunächst die Auswahlliste angesprochen. Um den ausgewählten Wert zu ermitteln, wird die Nummer des gewählten Eintrags benötigt. Diese steht in der Eigenschaft selectedIndex. Um bei Auswahl des ersten Menüpunktes keine leere Seite aufgerufen wird, befindet sich noch eine kurze Prüfung in der Funktion, ob der Wert leer ist, oder nicht.

Der Platzgewinn ist durch das Menü enorm, besonders, wenn alle 21 Jahre (die Seite behandelt die Geschichte der Heimcomputer von 1977 bis 1998) eingebaut werden. Wer sich etwas in der Scriptsprache PHP auskennt, kann das Beispiel so umbauen, das es auch mit Browsern funktioniert, bei denen JavaScript nicht eingeschaltet ist. Notwendig ist hierzu ein Submit-Button und eine extra PHP-Seite, die anhand des Formularwertes die gewünschte Seite lädt. So sähen die Änderungen aus:

<form action="go.php3" name="Navigation">
...
<input type="submit" value="Und los!">
</form>

In der Datei "go.php3" sollte stehen:

<?PHP
if ($jahre!="") {
header("Location: http://www.hchistory.de/$jahre.php3");
exit;
}
?>

Das PHP-Beispiel soll an dieser Stelle nicht näher erläutert werden. Um PHP ausführen zu können, muß es auf dem Webserver installiert sein, was aber gerade bei freien Webspace-Anbietern nicht immer der Fall ist.

Vor, zurück & nach oben

Neben der eben beschriebenen Navigationsmethode erfreuen sich kleine Navigationsbuttons großer Beliebtheit. Praktisch ist besonders ein Verweis, der zur zuletzt besuchten Seite springt, ohne deren genaue Adresse zu kennen:

<a href="javascript:back()">Zurück</a>

Beim Anklicken wird die vorige Seite aufgerufen. Dies klappt am besten, wenn keine Frames verwendet werden. Das Verhalten des Back-Buttons ist gerade wenn per JavaScript mehrere Framesets geändert wurden, nicht immer nachvollziehbar. Das Verhalten kann durchaus von Browser zu Browser variieren.

Ein Gegenstück zu back() gibt es selbstverständlich auch:

<a href="javascript:forward()">Weiter</a>

Es gibt auch die Möglichkeit, mehrere Seiten in dem Verlauf zurück zu gehen:

<a href="javascript:history.go(-2)">Zwei Seiten zurück</a>

... dies wird aber nur selten zum gewünschten Ergebnis führen. Die URLs des Verlaufes lassen sich aus Sicherheitsgründen nicht ermitteln, aber die Vorgängerseite ist bekannt, was ausgenutzt werden kann:

<a href="#" onClick="document.location.href=document.referrer">Zurück</a>

Dieser Verweis bewirkt auf Browsern ohne JS nichts, da im HREF-Attribut nur eine Raute steht. onClick wird nur von JS-fähigen Browsern ausgeführt und hat dann Priorität gegenüber HREF.

Der Referrer ist die Seite, die auf die aktuelle verwiesen hat. Ein kleines Problem gibt es aber: wenn die Seite mit dem Beispiel-Verweis gezielt über die URL-Zeile des Browsers aufgerufen wird, existiert kein Referrer - es erscheint eine Fehlermeldung. Einige Browser können den Link nur bei HTTP-Adressen und nicht lokal ausführen.

Die Adresse vom Referrer ist bekannt, so das auch eine Überprüfung möglich wäre, ob dieser gültig ist. Es ist aber fraglich, ob ein einfacher Back-Button diese Mühe wert ist...

Wenn es nach vorne und zurück geht, muß es auch nach oben und unten gehen. Dazu braucht es aber kein JavaScript, sondern nur HTML:

<a name="oben"></a>

Ist am Seitenanfang zu notieren und wird aufgerufen mit:

<a href="#oben">nach oben</a>

Analog funktionieren Verweise zum Seitenende.

Wechselspiele

Das Thema Frames wurde hier schon mehrfach angeschnitten. Bei Frameseiten kann über normales HTML nur ein Frame geändert werden. Es wäre aber zum Beispiel sehr praktisch wenn bei einem klassischen 3-Frame-Design (siehe Abbildung) sowohl der Content- als auch der Title-Frame geändert werden. Im oberen Frame wird dabei das aktuelle Thema angezeigt.

Vor dem Script muß erst etwas HTML verfaßt werden:

<html>
<head>
<title>Saotome Webshop für Geräte aller Art</title>
</head>
<frameset rows="140,*" frameborder="0" framespacing="0" border="0">
<frame src="webshop.jpg" name="oben">
<frameset cols="100,*" frameborder="0" framespacing="0" border="0">
<frame src="navi.html" name="navileft">
<frame src="inhalt.html" name="text" >
</frameset>
</frameset>
</html>

Die Datei index.html

<html>
<head>
<title>Navigation</title>
<script>
<!--
function zweiframes(frame1,frame2) {
parent.oben.location.href = frame1;
parent.text.location.href = frame2;
}
//-->
</script>
</head>
<body>
Wählen Sie aus:<br>
<a href="javascript:zweiframes('nightvision.jpg',
'nightvision.html')">NightVision</a>
</body>
</html>

navi.html

<html>
<head>
<title>Untitled</title>
</head>
<body>
Dies ist der Content-Frame.
</body>
</html>

inhalt.html

<html>
<head>
<title>Untitled</title>
</head>
<body bgcolor="black" text="white">
<b>NightVision</b> ist unsere Nachtsichtbrille der
neuesten Generation. Lieferung gegen 1244EUR bei der
alten Eiche, Ecke Wittenstieg.
</body>
</html>

nightvision.html

Die HTML-Dateien bilden die Basis für einen (wirklich miesen) Web-Shop. Damit alles richtig angezeigt wird, brauchen Sie noch zwei JPEG-Dateien, webshop.jpg und nightvision.jpg, aber Sie können natürlich auch gleich eigene Dateien dort ansprechen.

Die sprichwörtliche Musik spielt in der navi.html. Hier wird eine Funktion aufgerufen, die sowohl die URL des oberen als auch rechten Frames ändert:

function zweiframes(frame1,frame2) {
parent.oben.location.href = frame1;
parent.text.location.href = frame2;
}

Die Angabe "parent" ist erforderlich, da sonst versucht wird, das aktuelle Frame anzusprechen, was nicht klappt. Intern notiert der Browser für diese Anweisungen auch zwei ausgeführte Verweise, was zu einem seltsamen Verhalten des Zurück-Buttons führt. Dieser muß nun zweimal betätigt werden. Stellen sie sich einmal vor, wenn gleich acht Frames auf einmal geändert werden...

Natürlich könnten die HTML-Seiten auch so geschrieben werden, das sie beim laden das andere Frame aktualisieren und somit der Link auch ein ganz normaler HTML-Verweis wäre. Dann wird das ganze Projekt aber schnell sehr unübersichtlich.

Der Link in der navi.html läßt sich so ergänzen, das auch JS-lose Browser ihre Freude daran haben:

<a href="nightvision.html" target="text" 
onClick="javascript:zweiframes('nightvision.jpg',
'nightvision.html')">NightVision</a>

Diese Browser werden nur auf das href-Attribut achten und onClick ignorieren.


Mia Jaap
Aus: ST-Computer 09 / 2002, Seite 30

Links

Copyright-Bestimmungen: siehe Über diese Seite