Location.assign() — Methode · JavaScript-Referenz

Signatur

Location.prototype.assign(url)

Beschreibung

Mit location.assign(url) wechselt das aktuelle Browsing-Kontext (Fenster, Tab oder iframe) zu einer neuen URL. Die bisherige Seite bleibt in der Sitzungshistorie erhalten. Der Nutzer kann also mit der Zurück-Schaltfläche wieder dorthin zurückkehren. Das Verhalten ist dasselbe wie bei einer Zuweisung an location.href.

Relative URLs werden relativ zur URL des Dokuments aufgelöst, auf dem die Methode aufgerufen wurde (bzw. zur Basis-URL, die mit <base> gesetzt ist). Enthält die neue URL nur einen anderen Fragment-Bezeichner (#abschnitt), lädt der Browser die Seite nicht neu. Er springt dann nur zum Anker und löst ein hashchange-Ereignis aus.

Verwende assign(), wenn die Navigation für den Nutzer nachvollziehbar sein soll, z. B. nach einer Formularaktion oder nach einem Klick auf ein Element, das kein Link ist. Die Zurück-Schaltfläche soll danach zur vorherigen Seite führen. Wenn die aktuelle Seite nicht in der Historie bleiben soll (etwa bei Weiterleitungen nach dem Login), ist location.replace() besser geeignet.

Parameter

Name	Typ	Default	Beschreibung
$url Pflicht	string \| URL		Absolute oder relative URL der zu ladenden Seite. Objekte wie `URL` werden in einen String umgewandelt (über ihren Stringifier).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Navigation läuft asynchron: Code, der nach dem Aufruf steht, wird zunächst weiter ausgeführt.

Beispiele

Einfache Navigation zu einer anderen Seite

// Wechselt zur Hilfeseite; die aktuelle Seite bleibt in der Historie
window.location.assign('https://example.com/hilfe');

Weiterleitung nach Klick auf eine Tabellenzeile

// Jede Zeile trägt die ID des Produkts in einem data-Attribut
document.querySelectorAll('tr[data-id]').forEach((row) => {
  row.addEventListener('click', () => {
    const url = new URL('/produkte/detail', location.origin);
    url.searchParams.set('id', row.dataset.id);
    location.assign(url); // URL-Objekt wird automatisch zu einem String
  });
});

Unterschied zu replace() und Umgang mit relativen URLs

// Aktuelle Seite: https://example.com/shop/warenkorb
console.log(new URL('kasse', location.href).href);

// Mit Historien-Eintrag: Zurück führt zum Warenkorb
const weiterZurKasse = () => location.assign('kasse');

// Ohne Historien-Eintrag: Zurück überspringt die aktuelle Seite
const nachLoginWeiterleiten = () => location.replace('/konto');

weiterZurKasse();

https://example.com/shop/kasse

Nur den Anker ändern (kein Neuladen)

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

location.assign('#kontakt');

Neuer Hash: #kontakt

// Wichtig · Fallstricke

Sicherheit (Open Redirect / XSS): Übergib niemals ungeprüfte Nutzereingaben, z. B. aus ?redirect=. Eine URL wie javascript:alert(1) führt im Kontext der Seite Code aus. Prüfe URLs vorher mit new URL() auf ein erlaubtes Protokoll (https:) und einen erlaubten Ursprung. Mit Trusted Types oder einer strengen CSP lassen sich javascript:-URLs zusätzlich blockieren.
Eine ungültige URL löst eine SyntaxError-DOMException aus. Ruft ein Dokument assign() auf dem location-Objekt eines Fensters mit anderem Ursprung auf, entsteht eine SecurityError-DOMException.
Die Navigation beginnt asynchron. Anweisungen nach dem Aufruf laufen noch weiter. Mit einem return direkt danach verhinderst du unerwünschte Seiteneffekte.
Für echte Links ist ein <a href>-Element meist besser. Es ist barrierefrei, lässt sich mit Mittelklick in einem neuen Tab öffnen und wird von Suchmaschinen erkannt.
In Single-Page-Apps löst assign() ein vollständiges Neuladen der Seite aus. Für clientseitiges Routing ohne Neuladen gibt es history.pushState().
Die Methode wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

Location.replace() Location.reload() Location.href Location History.pushState() Location.toString()