Die Seite mit JavaScript neu laden: location.reload()
Eine Seite mit JavaScript neu laden
JavaScript location.reload(): Eine Seite richtig neu laden | We.Inc
Lade die Seite mit location.reload() neu, vergleiche es mit history.go(0), replace und Meta-Refresh, erzeuge Code für zeitgesteuertes Neuladen und erfahre, was reload(true) wirklich bewirkt.
Rufe location.reload() auf, um die aktuelle Seite neu zu laden, genau wie der Neu-laden-Button des Browsers. Die Methode nimmt keine Standardargumente. Die alte Form reload(true), die den Cache umgehen sollte, ist ein nicht standardisierter Parameter, den MDN nur in Firefox als unterstützt aufführt, andere Browser ignorieren das true also. history.go(0) lädt ebenfalls neu.
Wege, die Seite neu zu laden oder zu wechseln
Code
Was passiert
Neuer Verlaufseintrag?
location.reload()
Lädt die aktuelle URL neu
Nein
history.go(0) oder history.go()
Dasselbe Ergebnis wie location.reload()
Nein
location.replace(url)
Lädt url und ersetzt den aktuellen Eintrag
Nein, Zurück überspringt die alte Seite
location.assign(url)
Lädt url als neuen Schritt
Ja
<meta http-equiv="refresh" content="30">
Lädt nach 30 Sekunden neu, kein Skript nötig
Nein
Neu laden ist eine Codezeile, aber die Gründe dafür sind verschieden: neue Daten holen, einen hängenden Zustand zurücksetzen, ein Dashboard per Timer aktualisieren oder eine neue Version der Website erzwingen. Dieser Leitfaden zeigt den Standardaufruf, was die älteren Varianten wirklich tun und wie du ganz auf ein Neuladen verzichtest, wenn du nur frische Daten brauchst.
Wähle im Generator eine Methode zum Neuladen und ein Intervall.
Das Codefeld zeigt ein Snippet für diese Methode, das du direkt einfügen kannst.
Probiere mit den Buttons location.reload() und history.go(0) auf dieser Seite aus. Beide laden sie neu.
Lies den Abschnitt zum Cache, bevor du dich darauf verlässt, dass ein Neuladen neu deployte Dateien zeigt.
location.reload() gibt nichts zurück, und Code danach kann noch kurz laufen, bevor die Seite entladen wird, setze den Aufruf also ans Ende.
Warne vor dem Neuladen einer Seite mit Formular mit einem beforeunload-Listener vor ungespeicherten Eingaben. Der Browser zeigt dabei seine eigene allgemeine Meldung, nicht deine.
Zeitgesteuertes Neuladen in einem versteckten Tab verschwendet Daten und Akku. Prüfe document.visibilityState und überspringe das Neuladen, solange der Tab im Hintergrund ist.
In einer Single-Page-App ist es meist schneller, Daten neu abzurufen oder den State zurückzusetzen, und Scrollposition, Eingaben und Fokus bleiben erhalten.
Häufige Fragen
Leert location.reload(true) den Cache?
Nicht zuverlässig. Das Argument forceGet ist nicht Teil des HTML-Standards, und laut MDN unterstützt es nur Firefox. Andere Browser ignorieren es und laden normal neu. Damit Leute sicher neue Dateien bekommen, versioniere deine Asset-URLs oder setze passende Cache-Control-Header.
Was ist der Unterschied zwischen location.reload() und location.href = location.href?
reload() lädt das aktuelle Dokument immer neu. Eine Zuweisung an href startet eine Navigation zu dieser URL, und wenn die URL ein #fragment enthält, scrollt der Browser nur zum Fragment, es wird also nichts neu geladen. Nutze reload(), wenn du wirklich neu laden willst.
Wie lade ich eine Seite alle 30 Sekunden neu?
Ohne Skript fügst du <meta http-equiv="refresh" content="30"> in den head ein. Mit Skript: setTimeout(() => location.reload(), 30000). Setze automatisches Neuladen sparsam ein: MDN warnt, dass unerwartetes Neuladen Leute verwirren kann und den WCAG-Vorgaben zu Zeitbegrenzungen widerspricht.
Kann ein Skript eine Seite einer anderen Website neu laden?
Nein. Ein Aufruf von reload auf der Location eines anderen Origins wirft eine SecurityError DOMException. Ein Skript in einem iframe einer anderen Website kann also die übergeordnete Seite nicht neu laden, und umgekehrt geht es auf diesem Weg auch nicht.
Wie lade ich die Seite nur ein einziges Mal neu?
Markiere, dass du bereits neu geladen hast, etwa mit einem sessionStorage-Flag oder einem Query-Parameter wie ?r=1, und prüfe das vor dem Aufruf von reload. Ohne diese Absicherung erzeugt Code, der beim Laden neu lädt, eine Endlosschleife.
Neu laden oder frische Daten abrufen
Ein vollständiges Neuladen wirft die ganze Seite weg: das DOM, jede Variable, offene Menüs, eingegebenen Text und meist auch die Scrollposition. Das ist der richtige Reset, wenn die Seite in einem fehlerhaften Zustand ist oder eine neue Version laden muss.
Wenn du nur neue Zahlen auf einem Dashboard brauchst, rufe fetch auf, aktualisiere den geänderten Teil der Seite und lass den Rest, wie er ist. Das geht schneller, verbraucht weniger Daten und lässt den Bildschirm nicht flackern.
Warum ein Neuladen trotzdem alte Dateien zeigen kann
Bei einem normalen Neuladen prüft der Browser gecachte Dateien beim Server erneut, doch Dateien mit langer Cache-Lebensdauer können trotzdem direkt aus dem Cache kommen. Code, der aus JavaScript ein hartes Neuladen erzwingen will, kann das nicht browserübergreifend beheben.
Die verlässliche Lösung liegt auf dem Server und im Build: Setze einen Content-Hash in die Dateinamen von Skripten und Styles, damit jedes Deploy neue URLs bekommt, und liefere das HTML mit kurzer Cache-Lebensdauer oder no-cache aus, damit es immer auf die neuesten Dateien zeigt.
Code zum Neuladen zum Einfügen
Ein Button zum Neuladen
Der Klick-Handler ruft den Standard-Reload ohne Argument auf.
Per Timer neu laden, aber nur, solange der Tab sichtbar ist
Versteckte Tabs werden übersprungen, und ein Tab, der nach Ablauf des Intervalls zurückkommt, lädt sofort neu.
Genau einmal neu laden
Das sessionStorage-Flag übersteht das Neuladen im selben Tab, der zweite Ladevorgang überspringt es also.
Vor dem Neuladen mit ungespeicherten Änderungen warnen
Browser zeigen die Abfrage nur, nachdem die Person mit der Seite interagiert hat, und verwenden ihren eigenen Text.
Generator für Code zum Neuladen
Wähle, wie und wie oft die Seite neu laden soll, und kopiere dann das Snippet.
Methode
Jetzt neu laden
JavaScript-Timer
Timer, nur sichtbarer Tab
HTML-Meta-Refresh
Alle {n} Sekunden
Snippet
Auf dieser Seite ausprobieren
location.reload()
history.go(0)
Beide Buttons laden diese Seite neu. Alles, was du oben eingegeben hast, geht verloren.