Location.href — Eigenschaft · JavaScript-Referenz

Signatur

Location.href

Beschreibung

Die Eigenschaft href des Location-Interfaces enthält die komplette URL der aktuellen Seite, also Protokoll, Host, Port, Pfad, Query-String und Fragment, z. B. https://example.com:8080/pfad?q=1#abschnitt. Sie ist der sogenannte Stringifier von Location: String(location), location.toString() und Template-Literale wie `${location}` geben denselben Wert zurück.

Die Eigenschaft ist auch beschreibbar. Weist man location.href einen neuen Wert zu, lädt der Browser die angegebene URL und legt dabei einen neuen Eintrag im Sitzungsverlauf an. Das entspricht location.assign(url). Relative Angaben wie "../index.html" oder "?seite=2" werden relativ zur aktuellen URL aufgelöst. Ändert sich nur das Fragment (#…), lädt die Seite nicht neu. Stattdessen wird zum Anker gescrollt und ein hashchange-Event ausgelöst.

Typische Anwendungen:

Weiterleitung nach Login oder Logout
Die aktuelle URL auslesen, um sie zu teilen oder zu protokollieren
Die URL zusammen mit URL und URLSearchParams auswerten

Wenn der Zurück-Button nicht zur alten Seite führen soll, verwendet man besser location.replace().

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: absolute oder relative URL, zu der navigiert werden soll. Andere Werte werden in einen String umgewandelt. Ist die URL ungültig, wird ein `SyntaxError` (`DOMException`) geworfen.

Rückgabewert

Typ

string

Beschreibung

Die vollständige, serialisierte URL des aktuellen Dokuments. Sie ist normalisiert, relative Anteile sind also bereits aufgelöst.

Beispiele

Aktuelle URL auslesen und zerlegen

// Angenommen, die Seite ist https://shop.example.com/produkte?kategorie=buecher#top
const aktuelleUrl = location.href;
console.log(aktuelleUrl);

// Mit der URL-API zerlegen
const url = new URL(location.href);
console.log(url.searchParams.get('kategorie'));
console.log(String(location) === location.href);

https://shop.example.com/produkte?kategorie=buecher#top buecher true

Weiterleitung nach erfolgreichem Login

const login = async (benutzer, passwort) => {
  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ benutzer, passwort })
  });

  if (res.ok) {
    // Neuer Verlaufseintrag, Zurück-Button führt zur Login-Seite
    location.href = '/dashboard';
  } else {
    console.error('Login fehlgeschlagen');
  }
};

Query-Parameter sicher ändern und navigieren

// Zur nächsten Seite einer Liste wechseln
const naechsteSeite = () => {
  const url = new URL(location.href);
  const seite = Number(url.searchParams.get('seite') ?? 1);
  url.searchParams.set('seite', seite + 1);
  location.href = url.href; // löst Navigation aus
};

naechsteSeite();

Nur das Fragment ändern (kein Neuladen)

window.addEventListener('hashchange', () => {
  console.log('Neuer Hash:', location.hash);
});

// Relative Zuweisung, nur der Hash ändert sich
location.href = '#kontakt';

Neuer Hash: #kontakt

// Wichtig · Fallstricke

Sicherheit (Open Redirect / XSS): Weisen Sie location.href niemals ungeprüfte Nutzereingaben oder URL-Parameter zu, etwa ?redirect=…. Werte wie javascript:alert(1) führen Code im Kontext Ihrer Seite aus. Prüfen Sie Ziel-URLs mit new URL(wert, location.origin), und erlauben Sie nur http:/https: sowie die eigene origin. Eine strenge CSP ohne 'unsafe-inline' blockiert javascript:-URLs.
Verlauf: Jede Zuweisung legt einen Verlaufseintrag an. Für Weiterleitungen ohne Zurück-Möglichkeit ist location.replace() besser. Um die URL ohne Neuladen zu ändern, etwa in Single-Page-Apps, verwendet man history.pushState() bzw. replaceState().
Code nach der Zuweisung: Die Navigation läuft asynchron. Code nach location.href = … wird also weiter ausgeführt, bis die Seite entladen wird. Brechen Sie bei Bedarf mit return ab.
Cross-Origin: Bei fremden Fenstern oder iframes, z. B. iframe.contentWindow.location.href, ist das Lesen aus Sicherheitsgründen verboten (SecurityError). Das Schreiben ist erlaubt.
Kompatibilität: Wird von allen Browsern seit den Anfängen unterstützt. In Node.js gibt es kein location. Dort verwendet man URL.

Siehe auch

Location.assign() Location.replace() Location.reload() Location.hash Location.search History.pushState()