Navigation mittels JavaScript

Mehrere, aufeinander aufbauende HTML-Dateien in einem Verzeichnis sollen per Link aneinandergehängt werden. In diesem Fall bietet sich folgende Lösung an:

Das JavaScript „liest“ den Dateinamen aus und die Funktionen javascript:previousFile() und javascript:nextFile() ermöglichen ein weiterklicken, solange es Dateien gibt, die sich im Dateinamen nur in der niedrigeren oder höheren (fortlaufenden) Nummer unterscheiden.

Die drei hier verwendeten Dateien haben die Namen dokument_seitennavigation_page_00.html (vorherige Seite), dokument_seitennavigation_page_01.html (diese Seite) und dokument_seitennavigation_page_02.html (nächste Seite). Mit diesem JavaScript können maximal 100 Dateien »verbunden« werden. Prinzipiell kann das Script ausgebaut werden, um eine größere Seitenzahl anzusteuern.



Vorherige Seite  ||  Nächste Seite

(JavaScript-Links)



Das Script muss im head-Bereich der HTM-Datei stehen, eine Auslagerung in eine extra Script-Datei führt bei vielen Browsern zu Fehlfunktionen. Die Navigation erfolgt über die oben benannten Funktionen und wird als Link
<a href="javascript:previousFile()">Text oder Bild</a>
bzw.
<a href="javascript:nextFile()">Text oder Bild</a>
zur Verfügung gestellt.

Position in der html-Datei: head-Bereich, eine Auslagerung in ein js.-Datei ist nicht möglich. Dieser Quellcode enthälte keine Kommentare mehr.

Nachfolgend sehen Sie den Quelltext mit Kommentaren.

/* Beachten Sie, dass dieses Script im Abschnitt HEAD der Datei stehen sollte, um sicher zu sein, dass die Funktionen geladen sind, bevor die sie aufrufenden Links erstellt wurden. */

var URL = unescape(location.href)
        // wandle aktuelle URL in pures ASCII
var xstart = URL.lastIndexOf("/") + 1
        // ermittle den Anfang des Dateinamens
var xend = URL.length
        // ermittle Ende des Dateinamens
var digitOnePlace = URL.lastIndexOf('.') - 2
        // ermittle die Position der ersten Ziffer im Dateinamen
var digitTwoPlace = URL.lastIndexOf('.') - 1
        // ermittle die Position der zweiten Ziffer im Dateinamen
var digitOne = URL.charAt(digitOnePlace)
        // ermittle die erste Ziffer der Dateinummer
var digitTwo = URL.charAt(digitTwoPlace)
        // ermittle die zweite Ziffer der Dateinummer
var filePrefix = URL.substring(xstart,digitOnePlace)
        // ermittle den ersten Teil des Dateinamens
var suffixStart = URL.lastIndexOf('.')
        // ermittle den letzten Teil des Dateinamens
var fileSuffix = URL.substring(suffixStart,xend)

/* Die folgenden Zeilen sind ein Workaround fuer die Implementierung von JavaScript Opera 3.0, die alle Elemente eines Strings als Stringwerte behandelt und deshalb keine korrekten Berechnungen mit ihnen vornehmen kann; um das zu umgehen, erstelle ich neue Variablen mit numerischen Werten, die den Werten von digitOne und digitTwo entsprechen. */

var dig1 = null
var dig2 = null
dig1=parseInt(digitOne)
dig2=parseInt(digitTwo)

function previousFile()
        // diese Funktion bildet den Link zur vorhergehenden Datei der Serie
{
if (dig2 == 0)
        /* wenn die aktuelle Datei die Nummer x0 hat,
           dann setze die Nummer der vorherigen Seite auf (x-1)9 */
  {
    dig2 = 9
    dig1--
    }
else
    {
    dig2--
    }
previousFileName = filePrefix + dig1 + dig2 + fileSuffix
        /* bilde den Dateinamen, indem der erste und letzte Teil
           mit den zwei Zahlen der Dateinummer kombiniert wird */
location.href = previousFileName
        // setzte die 'location' auf die vorherige Datei
}

function nextFile()
        // diese Funktion bildet den Link zur naechsten Datei der Serie
{
if (dig2 == 9)
        /* wenn die aktuelle Datei die Nummer x9 hat,
           dann setze die Nummer der naechsten Seite auf (x+1)0 */
  {
    dig2 = 0
    dig1++
    }
else
    {
    dig2++
    }
nextFileName = filePrefix + dig1 + dig2 + fileSuffix
        /* bilde den Dateinamen, indem der erste und letzte Teil
           mit den zwei Zahlen der Dateinummer kombiniert wird */
location.href = nextFileName
        // setzte die 'location' auf die naechste Datei
}

Quelle: hsguide.com/guides/javascript/js_026.html Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten

© 1999