HashChangeEvent.oldURL — Eigenschaft · JavaScript-Referenz

Signatur

HashChangeEvent.oldURL

Beschreibung

Die schreibgeschützte Eigenschaft oldURL gehört zum HashChangeEvent, das beim hashchange-Event an window ausgelöst wird. Sie enthält die vollständige, absolute URL (inklusive Protokoll, Host, Pfad, Query und dem alten Fragment), die vor der Hash-Änderung aktiv war.

Gemeinsam mit newURL lässt sich so feststellen, von welchem Hash zu welchem navigiert wurde. Das ist vor allem bei einfachen, hash-basierten Routern in Single-Page-Anwendungen nützlich, etwa um Übergangsanimationen zu steuern, den vorherigen Zustand aufzuräumen oder Navigationsschritte zu protokollieren.

Da oldURL die ganze URL liefert, muss man den Hash-Teil in der Regel selbst herauslösen – am saubersten mit new URL(event.oldURL).hash. Der Wert ist ein reiner String; eine Änderung daran hat keine Auswirkung auf die Navigation.

Rückgabewert

Typ

string

Beschreibung

Die absolute URL vor der Hash-Änderung, z. B. "https://example.com/app#/start". Beim manuell erzeugten Event ohne Angabe ein leerer String.

Beispiele

Alte und neue URL beim Hash-Wechsel ausgeben

window.addEventListener("hashchange", (event) => {
  console.log("Vorher:", event.oldURL);
  console.log("Nachher:", event.newURL);
});

// Hash-Wechsel auslösen (z. B. ausgehend von https://example.com/#start)
location.hash = "#kontakt";

Vorher: https://example.com/#start Nachher: https://example.com/#kontakt

Einfacher Router mit Aufräumen der alten Route

const routes = {
  "#/liste": { enter: () => console.log("Liste anzeigen"), leave: () => console.log("Liste verlassen") },
  "#/detail": { enter: () => console.log("Detail anzeigen"), leave: () => console.log("Detail verlassen") }
};

const onHashChange = (event) => {
  const oldHash = new URL(event.oldURL).hash;
  const newHash = new URL(event.newURL).hash;

  routes[oldHash]?.leave();
  routes[newHash]?.enter();
};

window.addEventListener("hashchange", onHashChange);
location.hash = "#/liste";
// später:
// location.hash = "#/detail";

Liste anzeigen (nach Wechsel zu #/detail:) Liste verlassen Detail anzeigen

Über onhashchange und synthetisches Event

window.onhashchange = (event) => {
  const from = new URL(event.oldURL).hash || "(kein Hash)";
  console.log(`Gewechselt von ${from}`);
};

// Event manuell erzeugen, z. B. für Tests
const testEvent = new HashChangeEvent("hashchange", {
  oldURL: "https://example.com/#alt",
  newURL: "https://example.com/#neu"
});
console.log(testEvent.oldURL);
window.dispatchEvent(testEvent);

https://example.com/#alt Gewechselt von #alt

// Wichtig · Fallstricke

Volle URL, nicht nur Hash: oldURL enthält die komplette Adresse. Für den Fragment-Teil new URL(event.oldURL).hash verwenden statt fehleranfälligem split(\"#\").
Nur bei Hash-Änderungen: history.pushState() und history.replaceState() lösen kein hashchange aus, selbst wenn sich der Hash ändert. Für History-basierte Router stattdessen popstate nutzen.
Gleicher Hash: Wird location.hash auf den bereits aktiven Wert gesetzt, feuert kein Event.
Kodierung: Sonderzeichen im Hash erscheinen prozentkodiert; ggf. mit decodeURIComponent() dekodieren.
Kompatibilität: In allen modernen Browsern verfügbar; der Internet Explorer unterstützt oldURL/newURL nicht (dort ggf. letzten Hash selbst merken).
Sicherheit: Der Hash ist benutzerkontrolliert – Werte aus oldURL nie ungeprüft per innerHTML ins DOM schreiben (XSS-Gefahr).

Siehe auch

HashChangeEvent HashChangeEvent.newURL Location.hash PaymentRequestEvent.modifiers StorageEvent.url