HashChangeEvent.newURL — Eigenschaft · JavaScript-Referenz

Signatur

HashChangeEvent.newURL

Beschreibung

Die schreibgeschützte Eigenschaft newURL des HashChangeEvent enthält die vollständige, absolute URL des Dokuments nach der Änderung des Fragments, also inklusive Protokoll, Host, Pfad, Query-String und dem neuen #hash. Das Gegenstück ist oldURL mit der URL vor der Änderung.

Das Ereignis hashchange wird auf window ausgelöst, sobald sich der Fragment-Teil der URL ändert, etwa durch Klick auf einen Anker-Link (<a href="#abschnitt">), durch Zuweisung an location.hash oder durch Vor-/Zurück-Navigation im Verlauf. Mit newURL lässt sich direkt im Handler feststellen, wohin navigiert wurde, ohne erneut location auslesen zu müssen.

Typische Anwendungsfälle sind einfache Hash-basierte Router in Single-Page-Anwendungen, das Nachladen von Inhalten passend zum Abschnitt oder Analyse-/Tracking-Logik, die Übergänge zwischen Ansichten protokolliert. Zum Zerlegen des Werts eignet sich der URL-Konstruktor: new URL(event.newURL).hash liefert den reinen Fragment-Teil.

Rückgabewert

Typ

string

Beschreibung

Die vollständige, absolute neue URL als String, z. B. "https://example.com/app?x=1#/profil". Ist das Fragment leer, endet sie ohne oder mit leerem #.

Beispiele

Alte und neue URL protokollieren

window.addEventListener('hashchange', (event) => {
  console.log('Von:', event.oldURL);
  console.log('Nach:', event.newURL);
});

// Hash-Wechsel auslösen
location.hash = 'kontakt';

Von: https://example.com/seite Nach: https://example.com/seite#kontakt

Einfacher Hash-Router mit newURL und URL-Konstruktor

const routes = {
  '#/start': () => 'Startseite',
  '#/profil': () => 'Benutzerprofil',
  '#/einstellungen': () => 'Einstellungen'
};

const render = (url) => {
  const { hash } = new URL(url);
  const view = routes[hash] ?? (() => '404 – Seite nicht gefunden');
  document.querySelector('#app').textContent = view();
};

window.addEventListener('hashchange', (event) => render(event.newURL));

// Initiales Rendern (beim Laden feuert kein hashchange)
render(location.href);

Handler über on-Property und Wechsel auswerten

window.onhashchange = (event) => {
  const alt = new URL(event.oldURL).hash || '(kein Hash)';
  const neu = new URL(event.newURL).hash || '(kein Hash)';
  console.log(`Abschnittswechsel: ${alt} → ${neu}`);
};

location.hash = 'kapitel-2';

// Später wieder entfernen
// window.onhashchange = null;

Abschnittswechsel: (kein Hash) → #kapitel-2

// Wichtig · Fallstricke

Vollständige URL, nicht nur der Hash: newURL enthält die ganze Adresse. Für den Fragment-Teil new URL(event.newURL).hash oder location.hash verwenden.
Kein Ereignis beim ersten Laden: hashchange feuert nur bei einer Änderung. Den Anfangszustand muss man selbst über location.href auswerten.
Kein Ereignis bei history.pushState()/replaceState(): Wird der Hash über die History-API gesetzt, entsteht kein hashchange. Dafür popstate bzw. eigene Logik nutzen.
Gleicher Hash: Wird location.hash auf den aktuellen Wert gesetzt, wird kein Ereignis ausgelöst.
Sicherheit: Der Hash kommt vom Nutzer bzw. aus Links und ist nicht vertrauenswürdig. Werte aus newURL niemals ungeprüft in innerHTML einsetzen oder an eval übergeben (DOM-basiertes XSS). Besser textContent oder eine Whitelist bekannter Routen verwenden.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Nur sehr alte Browser (Internet Explorer 8–10) boten zwar hashchange an, aber kein newURL/oldURL`. Ersatzweise location.href auslesen.

Siehe auch

HashChangeEvent HashChangeEvent.oldURL Location.hash MathMLAnchorElement.search StorageEvent.url