Window History – Browser Vor- und Zurück

History für Ajax-Seiten

Javascript kann nur die Anzahl der Seiten in der History zählen und im Blindflug zu diesen URLs verlinken. window.history ist für »einfache« Seiten nutzlos. Das history-Objekt simuliert die Vorwärts- und Zurück-Buttons des Browsers und wir können es unseren Besuchern durchaus zumuten, die entsprechenden Schaltflächen des Browsers zu benutzen.

Dynamische Seiten mit Query Strings brauchen eine zusätzliche Steuerung. Mit Ajax-Anwendungen, die Teile der Seite nachladen ohne die URL vollständig zu ändern, wird das Setzen von Bookmarks zu einem bestimmten Zustand kompliziert. Zurück und Vor springen auf eine zuvor besuchte Seite hin und zurück, nicht aber innerhalb von Zuständen der Ajax-Seite.

Pages can add state objects between their entry in the session history and the next (forward) entry. These are then returned to the script when the user (or script) goes back in the history, thus enabling authors to use the »navigation« metaphor even in one-page applications.

history umfasst fünf Funktionen und zwei Objekte (read only) und wirkt wie eine verlinkte Liste.

Zwei Objekte sitzen in jedem Link des History-Objekts:

length

Die Zahl der History-Zustände vor dem aktuellen Browserfenster. Ausgangspunkt ist 1.

state

Ein Objekt, dass so ziemlich alles enthalten kann. Ist null per Vorgabe.

Single Page Application (SPA)

Unter einer Single Page Application versteht man eine Seite, die immer dieselbe HTML-Datei bleibt, die aber URLs dynamisch ändert, damit ein Back und Forward genutzt werden kann. Dafür wird window.history benutzt, das die URLs ohne Reload manipuliert.

// URL ändern ohne Reload
history.pushState({page: "about"}, "About", "/about");

// URL ersetzen ohne neue History-Einträge
history.replaceState({page: "home"}, "Home", "/home");

// Event, wenn der Nutzer Back/Forward klickt
window.addEventListener("popstate", (e) => {
  console.log("Neue URL: ", window.location.pathname);
});

SPAs profitieren von einer flüssigen Navigation, weil die Seite im Browser bleibt, in den aber Bookmarks und »Teilen« funktioniert. Hier entstehen also virtuelle Seiten, also mehrere Views in einer Datei.

Als ein ganz einfaches Beispiel könnte man eine HTML-Seite für das Portefolio eines Künstlers oder die klassischen Aufträge für einen Berater nehmen. Die Seite würde Referenzen, Impressum, Datenschutz und Bio unter einem Hut vereinigen. Das bedeutet zunächst mal, keinen Extra Seitenaufwand, das Design wird an zentraler Stelle geändert, es entsteht eine übersichtliche Navigation, die ebenfalls zentral an einer Stelle erweitert werden kann.

Die Alternative wäre ein klassisches One-Page-Design: nur eine HTML-Seite mit interner Navigation mit Anchor-Links. Dabei ist kein JavaScript-Routing erforderlich, die Seite ist SEO-freundlich. Etwas Smooth Scroll dazu und die Seite macht einen modernen Eindruck.

window.history

history.go(distance)

Wirkt wie der Vorwärts- oder Zurück-Button des Browsers, aber bereichert um die Option, mehrere Sprünge zurück oder vorwärts zu gehen. history.go(3) wirkt wie ein dreimaliger Klick auf den Vorwärts-Button ohne die Seiten dazwischen zu laden. Ein negativer Wert führt zurück. history.go(0) oder history.go() und selbst history.go(NaN) wirken wie ein Refresh.

history.back()

Wirkt wie der Zurück-Button des Browsers und ist dasselbe wie history.go(-1).

history.forward()

Wirkt wie der Vorwärts-Button des Browsers und ist dasselbe wie history.go(1).

history.replaceState(state, title[, location])

Ersetzt den aktuellen history-Zustand.
state wird als history.state für spätere Aufrufe gespeichert.
title soll vom Browser als Schnittstelle angeboten werden, wird aber von keinem Browser unterstützt.
location ändert die relative URL der aktuellen eigenen Seite, aber nicht die URL von anderen Webseiten. Die (eigene) URL wird zwar geändert, aber die angegebene URL wird nicht geladen. back oder forward zeigen die geänderte URL, triggern ein popstate, aber kein load oder unload. Erst ein Refresh der Seite lädt die Seite mit der URL anstelle der zuvor besuchten Seite. Wird bevorzugt benutzt, um einen Query String zu ändern, nicht aber die volle URL.

history.pushState(state, title[, location])

funktioniert wie history.replaceState, nur wird dabei der Zustand nach der aktuellen Seite eingesetzt.

Wie schon angedeutet, ist history ein Instrument, um den Benutzer durch dynamisch generierten Inhalt zu führen, ohne die ganze Seite neu zu laden.

So kann der Benutzer beim ersten Laden der Seite begrüßt werden, aber nicht, wenn er die Seite ein weiteres Mal lädt.

performance.getEntriesByType

Wie wurde die aktuelle Seite geladen? War es ein Reload, eine normale Navigation oder ein Zurück-Klick? performance.getEntriesByType("navigation")[0].type gibt zurück, wie die aktuelle Seite geladen wurde. performance.getEntriesByType ersetzt das alte performance.navigation.type, dass veraltet ist und nicht mehr benutzt werden sollte.

const nav = performance.getEntriesByType("navigation")[0];
console.log(nav.type);