Window History – Browser Vor- und Zurück

Javascript Window history push state und replace state

In window.history speichern die Browser die URLs, die der Benutzer besucht hat, z.B. für den Vorwärts- und Zurück-Button des Fensters. Der Sicherheit zuliebe kann JavaScript die URLs der history nicht lesen und so herausfinden, welche Seiten der Besucher zuvor besucht hat.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

– WHATWG

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

Darstellung einer verlinkten Liste
Beispiel: Darstellung einer linked list, einer verlinkten 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.

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.

history-Link mit Javascript

window.onload = function() {
   if (window.performance && window.PerformanceNavigation) {
      let type = performance.navigation.type;
      if (type == PerformanceNavigation.TYPE_NAVIGATE) {
         console.log ("Seite wurde geladen");
      } else if (type == PerformanceNavigation.TYPE_RELOAD) {
         console.log ("Seite wurde erneut geladen (RELOAD)");
      } else if (type == PerformanceNavigation.TYPE_BACK_FORWARD) {
         console.log ("Seite wurde durch BACK oder FORWARD geladen, nicht aber von einem Zustand der History");
      }
   }
   if (history.state == null) {
      console.log ("Erstes Laden");
   } else {
      console.log ("REFRESH oder Rückkehr von einer anderen URL via Vorwärts / Zurück");
   }
   
   let state = history.state;
   let title = document.title; 
   let URL = window.location;   

   history.replaceState(state, title, URL); 
}

window.onpopstate = function() {
   console.log ("onpopstate – zurück von einer anderen URL");
}

window.onunload = function() {
   console.log ("onunload");
}

performance.navigation.type stellt fest, in welchem Zustand die Seite geladen wird.