Browser vorwärts und rückwärts blättern: window.history

Jeder Internetbrowser merkt sich die besuchten URLs und der Nutzer kann durch den Zurück-Button zu den letzten URLs springen bzw. dann auch wieder vorwärts springen. Aber was kann JavaScript mit diesem Gedächtnis in Form von window.history anstellen?

Gar nicht so viel – da aus Sicherheitsgründen JavaScript nur die Anzahl der Einträge in der Historie auslesen kann, aber nicht die URLs selber! Den Aufruf der letzten URLs, die in der Historie ist auch möglich (natürlich auf vorwärts). Dies erfolgt aber nur Anhand einer Zahl – die URLs selber ist für JavaScript unbekannt. Das kann also auch schiefgehen!

Folgende JavaScript-Befehle haben wir für window.history zur Verfügung:

window.history.length
window.history.back()
window.history.forward()
window.history.go(Seitenvor-bzw-rückswärts)

Alle Befehle werden i.d.R. in der verkürzten Schreibweise genutzt – wichtig ist einfach zu verstehen, dass Sie dem window.-Bereich angehören, was irgendwie auch logisch ist.

history.length
history.back()
history.forward()
history.go(Sprungweite)

window.history.length – Anzahl der Einträge

Der JavaScript-Befehl window.history.length bringt uns die Anzahl der Einträge der Historie. Der Befehl funktioniert genauso in der Kurzschreibweise

history.length

Über diese Funktion erhält man die Information, wie viele Seiten der Besucher in der aktuellen Browser-Session besucht hat. Allerdings gibt nur bis 50.

Die maximale Länge ist 50.

Der Start kann bei 0 beginnen (hier starten IE und Opera) bzw. 1 bei Chrome, Firefox und Safari.

Der Wert kann nur ausgelesen werden aber nicht gesetzt werden (das würde auch keinen Sinn machen).

history.back() – einen Schritt zurück

Die letzte Seite wird über die JavaScript-Anweisung history.back() aufgerufen und angezeigt. Das gleiche erreicht man über eine negative Zahl bei history.go(-1)

history.back()
history.go(-1)

Wenn es noch keinen Eintrag in der Historie-Liste gibt, dann funktioniert die Anweisung auch nicht. Man kann nicht zu etwas zurückgehen, was noch nicht da ist. Der Besucher hat also bisher nur eine einzige Seite in der Browser-Session aufgerufen.

history.forward() – einen Schritt vorwärts

Was rückwärts geht, muss auch wieder vorwärts gehen. Die JavaScript-Anweisung history.forward() ruft die nächste Seite auf (wenn eine in der Historie vorhanden ist). Auch hier kann mit history.go(1) gearbeitet werden.

history.forward()
history.go(1)

history.go(Sprungweite) – Anzahl Schritte direkt springen

Wie oben bereits gezeigt kann durch die Angabe von negative bzw. positiven Zahlen über die JavaScript-Anweisung history.go(3) auch mehrere Schritte auf einen Schlag gesprungen werden.

history.go(-1)  // die letzte Seite, wie history.back()
history.go(1) // die nächste Seite, wie history.forward()
history.go(-3)  // 3 Seiten zurück und anzeigen
history.go(0)

Spannend ist noch die Angabe history.go(0) - damit wird die aktuelle Seite frisch geladen. Somit haben wir damit einen „Reload“ der aktuellen Seite!

history.go(0) - Reload der aktuellen Seite

Einen Reload der aktuellen Seite klappt über die Anweisung history.go(0). Wir können die Null aber in verschiedenen Formen angeben. Alle 3 folgenden Anweisungen machen dasselbe.

history.go(0)
history.go()
history.go(NaN)

history.state, history.replaceState und history.pushState

Der Status in der Historie kann gesetzt und verändert werden. Hier einfach unter dem Stichwort „Ajax-Seiten“ weiterlesen.

Wird eine „null“ als Rückgabewert zurückgegeben bedeutet das, dass es sich um den ersten Besuch auch einer Seite handelt.