Location.reload() — Methode · JavaScript-Referenz

Signatur

Location.prototype.reload()

Beschreibung

Die Methode location.reload() weist den Browser an, die aktuell angezeigte Seite erneut zu laden. Das Verhalten entspricht dem Drücken von F5 bzw. der Aktualisieren-Schaltfläche: Der komplette JavaScript-Zustand der Seite geht verloren, alle Skripte werden neu ausgeführt und die Ereignisse beforeunload, pagehide und unload werden ausgelöst.

Typische Anwendungsfälle sind das Zurücksetzen der Anwendung nach einem Logout oder Sprachwechsel, das Laden einer neuen Version nach einem Deployment (z. B. wenn ein Service Worker aktualisiert wurde) oder als letzte Rettung nach einem nicht behebbaren Fehler. Für reine Datenaktualisierungen ist ein vollständiger Neuladevorgang meist übertrieben – hier sind fetch() und gezielte DOM-Aktualisierungen die bessere Wahl.

Ob der Browser Ressourcen aus dem HTTP-Cache verwendet, entscheidet er selbst; in der Regel werden bei einem Reload Validierungsanfragen (If-Modified-Since/If-None-Match) gesendet. Der neu geladene Eintrag ersetzt keinen Verlaufseintrag – es entsteht also kein zusätzlicher Eintrag in der History. Die Scrollposition wird von den meisten Browsern wiederhergestellt.

Die Methode ist auch über window.location.reload() und document.location.reload() erreichbar. Aus einem fremden Ursprung (z. B. einem Cross-Origin-Iframe) darf sie nicht aufgerufen werden.

Parameter

Name	Typ	Default	Beschreibung
$forceGet	boolean		Nicht standardisiert, nur Firefox. Bei `true` soll Firefox den Cache umgehen. Andere Browser ignorieren das Argument; es sollte in portablem Code nicht verwendet werden.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Die Seite wird anschließend neu geladen; Code nach dem Aufruf kann noch kurz weiterlaufen, bis die Navigation beginnt.

Beispiele

Einfacher Reload per Schaltfläche

const button = document.querySelector('#refresh');

button.addEventListener('click', () => {
  // Seite komplett neu laden
  location.reload();
});

Neu laden, wenn ein neuer Service Worker aktiv wird

if ('serviceWorker' in navigator) {
  let refreshing = false;

  navigator.serviceWorker.addEventListener('controllerchange', () => {
    // Endlosschleife verhindern
    if (refreshing) return;
    refreshing = true;
    location.reload();
  });
}

Nach Logout Zustand zurücksetzen

const logout = async () => {
  await fetch('/api/logout', { method: 'POST', credentials: 'include' });
  sessionStorage.clear();
  // Alle In-Memory-Daten verwerfen
  window.location.reload();
};

document.querySelector('#logout').addEventListener('click', logout);

Cache umgehen durch Query-Parameter (portabler Ersatz für forceGet)

const hardReload = () => {
  const url = new URL(location.href);
  url.searchParams.set('_', Date.now().toString());
  // replace() erzeugt keinen zusätzlichen Verlaufseintrag
  location.replace(url);
};

hardReload();

// Wichtig · Fallstricke

Zustand geht verloren: Nicht gespeicherte Formulareingaben und alle JavaScript-Variablen werden verworfen. Wichtige Daten vorher in sessionStorage oder localStorage sichern bzw. per beforeunload warnen.
POST-Anfragen: Wurde die Seite per POST geladen, zeigen Browser beim Reload einen Dialog zum erneuten Senden der Formulardaten an. Abhilfe: Post/Redirect/Get-Muster verwenden.
Endlosschleifen: Ein reload() direkt beim Laden ohne Abbruchbedingung erzeugt eine Reload-Schleife. Immer ein Flag (z. B. in sessionStorage) oder eine Bedingung verwenden.
forceGet: Nur Firefox kennt diesen Parameter; er ist nicht Teil des HTML-Standards. Für ein zuverlässiges Umgehen des Caches serverseitige Cache-Header oder einen Cache-Busting-Parameter nutzen.
Sicherheit: Ein Aufruf auf dem location-Objekt eines Fensters mit anderem Ursprung löst eine SecurityError-DOMException aus.
Kompatibilität: In allen Browsern seit jeher unterstützt; auch in Node.js nicht verfügbar (nur Browser-Umgebung).

Siehe auch

Location Location.replace() Location.assign() Location.href Window.location History.go()