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.

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.