So laden Sie eine Seite mit JavaScript neu

874

Wie kann ich die Seite mit JavaScript neu laden?

Ich brauche eine Methode, die in allen Browsern funktioniert.

Resh
quelle

Antworten:

947

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

JavaScript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

JavaScript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.
Gianebao
quelle
81
'true' erzwingt das Neuladen der Seite vom Server. 'false' wird, falls verfügbar, aus dem Cache neu geladen.
Barro32
3
Wird .reload(true)der Geschichte hinzugefügt? Wenn ja, wie kann dies beim Nachladen vermieden werden?
johntrepreneur
12
Hier ist ein Link zu den Dokumenten: developer.mozilla.org/en-US/docs/Web/API/window.location
Justin Ethier
1
Dies ist die beste Antwort und sollte oben sein. Mein Problem mit den anderen Funktionen ist, dass sie die Seite nicht mit Inhalten vom Server aktualisiert und stattdessen den Cache verwendet haben, sodass die JavaScript 1.2-Lösung die beste und einzige Lösung für mich war.
Ryan Coolwebs
8
.reload (true) oder .reload (false) ist laut meiner IDE und github.com/Microsoft/TypeScript/issues/28898 veraltet - sollte jetzt .reload ()
danday74
388
location.reload();

Weitere Informationen finden Sie auf dieser MDN-Seite .

Wenn Sie nach einem onclickaktualisieren, müssen Sie direkt danach false zurückgeben

location.reload();
return false;
Lekensteyn
quelle
22
Was ist der Unterschied zwischen location.reload()und window.location.reload()?
Raptor
53
@ShivanRaptor der Regel keine, in Web - Browsern Zusammenhang locationist die gleiche wie window.locationwie windowist das globale Objekt.
Lekensteyn
1
Vergessen Sie nicht, return false;wenn Sie dies über einen Klick in einem Link aufrufen.
Rimian
2
Ich bevorzuge die Verwendung window.location.reload();aus Gründen der Lesbarkeit, da locationdies eine lokale Variable sein könnte - während Sie normalerweise Variablen des Namens vermeiden würden window.
Yeti
219

Hier sind 535 Möglichkeiten , um die Seite mit JavaScript neu zu laden , die einfachste Wesen location = location.

Dies sind die ersten 50:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...
Jeremy Thille
quelle
84
das ist interessant, aber jetzt bin ich verwirrt
Arun Prasad ES
14
Es hebt auch die Besonderheit von Javascript hervor :)
Jeremy Thille
53
Ich persönlich mag diese Antwort nicht, da dies nur eine Handvoll verschiedener Implementierungen zeigt, um den Standort zu ändern. Diese Möglichkeiten sind Permutationen verschiedener Möglichkeiten, eine Funktion auszuführen oder auf ein Attribut in Javascript zuzugreifen. NICHT verschiedene Möglichkeiten, eine Seite neu zu laden.
Joshua Behrens
42
Sicher gibt es noch mehr, wie:window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']
Renato
84

Sie können diese Aufgabe mit ausführen window.location.reload();. Es gibt viele Möglichkeiten, dies zu tun, aber ich denke, es ist die geeignete Möglichkeit, dasselbe Dokument mit JavaScript neu zu laden. Hier ist die Erklärung

JavaScript- window.locationObjekt kann verwendet werden

  • um die aktuelle Seitenadresse (URL) zu erhalten
  • um den Browser auf eine andere Seite umzuleiten
  • um dieselbe Seite neu zu laden

window: in JavaScript repräsentiert ein geöffnetes Fenster in einem Browser.

location: in JavaScript enthält Informationen zur aktuellen URL.

Das locationObjekt ist wie ein Fragment des windowObjekts und wird über die window.locationEigenschaft aufgerufen .

location Objekt hat drei Methoden:

  1. assign(): Wird zum Laden eines neuen Dokuments verwendet
  2. reload(): Dient zum erneuten Laden des aktuellen Dokuments
  3. replace(): Wird verwendet, um das aktuelle Dokument durch ein neues zu ersetzen

Hier müssen wir also verwenden reload(), da dies uns beim erneuten Laden desselben Dokuments helfen kann.

Also benutze es gerne window.location.reload();.

Online-Demo auf jsfiddle

Um Ihren Browser aufzufordern, die Seite direkt vom Server und nicht aus dem Cache abzurufen, können Sie einen trueParameter an übergeben location.reload(). Diese Methode ist mit allen gängigen Browsern kompatibel, einschließlich IE, Chrome, Firefox, Safari und Opera.

Nikhil Agrawal
quelle
2
Ah ha! replace()Es stellte sich heraus, dass dies die Lösung war, nach der ich gesucht hatte, da ich meine Seite mit einer geringfügigen Änderung in der Abfragezeichenfolge neu laden musste.
Bernard Hymmen
Von w3schools: "Der Unterschied zwischen assign () und replace () besteht darin, dass replace () die URL des aktuellen Dokuments aus dem Dokumentverlauf entfernt. Dies bedeutet, dass es nicht möglich ist, mit der Schaltfläche" Zurück "zurück zum zu navigieren Das echte Dokument."
Pasaba por Aqui
54

Versuchen:

window.location.reload(true);

Der auf 'true' eingestellte Parameter lädt eine neue Kopie vom Server neu. Wenn Sie es weglassen, wird die Seite aus dem Cache bereitgestellt.

Weitere Informationen finden Sie unter MSDN und in der Mozilla-Dokumentation .

Orane
quelle
1
Was ist, wenn ich eine externe Webseite www.xyz.com/abc aktualisieren möchte?
DoIt
@ Dev: Sie sollten versuchen, mit "ersetzen", wie später erwähnt
Jean Paul AKA el_vete
@Orane: Ich mag sowohl die Einfachheit als auch den Einfallsreichtum dieser Antwort besonders, da sie viele Optionen bietet, um die Anfrage der Operation zu erfüllen. Vielen Dank, dass Sie auch in dieser Situation einen autoritätsbezogenen Link zur späteren Bezugnahme als jeder Browser bereitgestellt haben haben ihre eigene JS-Engine zum Rendern ... Ich denke, dass die Frage sehr allgemein ist und dass es davon abhängen sollte, wofür Sie das tun möchten, weil sonst Webreferenz : " phpied.com/files/location-location/location- location.html "könnte die Operation für diese Frage vollständig erfüllen. Dieser hat mir jedoch geholfen;)
Jean Paul AKA el_vete
1
Ist das noch wahr? Beide Links erwähnen keine Parameter für das Neuladen.
Rüdiger Schulz
51

Ich habe nach Informationen zum erneuten Laden von Seiten gesucht, die mit POST-Anforderungen abgerufen wurden, z. B. nach dem Absenden eines method="post"Formulars.

Verwenden Sie Folgendes, um die Seite mit den POST-Daten neu zu laden :

window.location.reload();

Verwenden Sie Folgendes, um die Seite neu zu laden und die POST-Daten zu verwerfen (eine GET-Anforderung ausführen) :

window.location.href = window.location.href;

Hoffentlich kann dies anderen helfen, nach denselben Informationen zu suchen.

Starwarswii
quelle
Vielen Dank für die Antwort mit einem Verweis auf das erneute Laden eines Dokuments, das mit einer POSTAnfrage abgerufen wurde .
Christopher Schultz
Gute Unterscheidung zwischen GETund POSTMethoden
Hassan Baig
Diese Antwort war zu weit unten!
Greg Randall
1
window.location.href = window.location.hreflädt die Seite nicht neu, wenn die aktuelle URL a enthält #. Sie können den Hash entfernen, wenn Sie ihn nicht benötigen window.location.href = window.location.href.split('#')[0];.
Roland Starke
41

Verwenden Sie zum erneuten Laden einer Seite mit JavaScript:

window.location.reload();
Girish Ninama
quelle
37

Das funktioniert bei mir:

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/

umer
quelle
Dies ist für mich vorzuziehen, da es eine Schleifenbedingung auf der Serverseite vermeidet
ILMostro_7
1
Ich schätze besonders die Aufnahme der Timeout-Funktion, da ich eine Nachricht habe, die ich noch sehen möchte, bevor die Aktualisierung erfolgt. Ein großes Lob!
Matt Cremeens
Sie können verschiedene Werte als zweites Argument für die Funktion setTimeout festlegen, aber es funktioniert nicht. Das Neuladen erfolgt sofort. Wie kann es gelöst werden?
O.Kuz
1
@ O.Kuz glaube nicht. Angenommen, Sie setzen den Wert auf 5000 ms. Nach 5 Sekunden erfolgt ein erneutes Laden. siehe jsfiddle.net/umerqureshi/znruyzop/446
umer
1
Ich muss einen Fehler in meinem Code finden. Vielen Dank!
O.Kuz
15

Wenn Sie setzen

window.location.reload(true);

Am Anfang Ihrer Seite wird die Seite geladen, ohne dass eine andere Bedingung dafür vorliegt, warum dieser Code ausgeführt wird. Anschließend wird sie selbst neu geladen, bis Sie Ihren Browser schließen.

Joe Devlin
quelle
Nun, oder bis Sie eine andere URL öffnen. Dies hängt wahrscheinlich von der Fähigkeit des Browsers ab, fortlaufende Seiten (erneut) zu laden.
Adamdunson
Nun, das hängt davon ab, wo Sie es platzieren, wie Sie richtig angegeben haben. Wir beziehen uns hier lediglich darauf, dass ein Ankertag möglicherweise nicht das intuitive Element ist, um eine Aktion wie das Neuladen der Seite auszuführen. Vorschlag: Wir verlassen uns daher auf ein anderes UI-Objekt als Ziel, um ein Onclick-Ereignis durchzuführen. Sie können dies in jQuery tun, nachdem die Seite geladen wurde, indem Sie ein div als Ziel festlegen, z. B. wenn Sie es mit CSS dekorieren. Dies hängt davon ab, was Sie damit tun möchten. In diesem Zusammenhang eher eine Schaltfläche als eine Schaltfläche vom Eingabetyp. Wenn wir nicht vorhaben, ein Argument an die Backend-App zu übergeben, erscheint dies angemessener.
Jean Paul AKA el_vete
IE: <button onclick = "Javascript: window.location.reload (true);"
Jean Paul AKA el_vete
11
location.href = location.href;
guilin 桂林
quelle
5
Moderne Browser ignorieren dies, da sich die href nicht ändert, sodass sie nicht neu geladen werden muss. Sie sollten dies nur als Failover für alte Browser ohne Neuladen verwenden: (location.reload? Location.reload (): location.href = location.href)
Radek Pech
@RadekPech Welche älteren Browser haben keine location.reload()?
Matthias
8

Verwenden Sie es, um es einfach und unkompliziert zu machen location.reload(). Sie können auch verwenden, location.reload(true)wenn Sie etwas vom Server abrufen möchten.

Joshua
quelle
8

Verwenden Sie eine Schaltfläche oder setzen Sie sie einfach in ein "a" (Anker) -Tag:

<input type="button" value="RELOAD" onclick="location.reload();" />

Versuchen Sie diese für andere Bedürfnisse:

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one
Arun Prasad ES
quelle
1
interessant ... wie wäre es mit <button> </ button>? funktioniert genauso, oder?
Jean Paul AKA el_vete
1
Es hat wie ein Zauber funktioniert! Siehe meine Antwort unten :) Danke
Jean Paul AKA el_vete
5

Kürzeste ( mehr )

history.go()
Kamil Kiełczewski
quelle
4

Seite nach 20 Sekunden automatisch neu laden.

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>
Ali Chegini
quelle
4

Vielen Dank, dieser Beitrag war sehr hilfreich, um nicht nur die Seite mit der vorgeschlagenen Antwort neu zu laden, sondern auch um mir die Idee zu geben, ein jQuery-UI-Symbol auf einer Schaltfläche zu platzieren:

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

Bearbeitet, um zu zeigen, wie dies aussieht, wenn es in ein Projekt aufgenommen wird

2016-07-02

Ich entschuldige mich dafür, dass dies ein persönliches Projekt ist, das die Verwendung von jQuery UI, Themeroller, Icons Framework und Methoden wie jQuery Tabs impliziert, aber es ist auf Spanisch;)

Jean Paul AKA el_vete
quelle
@Peter Mortensen: Vielen Dank für die Bearbeitung, dieser Projektprototyp wurde für das College erstellt, daher musste er bei den beigefügten Screenshots auf Spanisch sein. Ich entschuldige mich dafür. Natürlich musste ein Kern für die jQuery-Benutzeroberfläche vorhanden sein Abhängigkeiten , um es zusammen zu machen mischen wie: --- zum Beispiel die Themeroller Widget jqueryui.com/themeroller und Plugins wie: plugins.jquery.com/qTip2 , datatables.net .. die jQuery - Bibliothek selbst, etc .. aber die Die Aktion wurde basierend auf einigen der obigen Antworten durchgeführt: onclick = "javascript: window.location.reload (true);">!
Jean Paul AKA el_vete
3

Das sollte funktionieren:

window.location.href = window.location.href.split( '#' )[0];

oder

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

Ich bevorzuge dies aus folgenden Gründen:

  • Entfernt den Teil nach dem # und stellt sicher, dass die Seite in Browsern neu geladen wird, in denen der Inhalt nicht neu geladen wird.
  • Sie werden nicht gefragt, ob Sie den letzten Inhalt erneut veröffentlichen möchten, wenn Sie kürzlich ein Formular gesendet haben.
  • Es sollte auch auf den neuesten Browsern funktionieren. Getestet auf Lasted Firefox und Chrome.

Alternativ können Sie für diese Aufgabe die neueste offizielle Methode verwenden

window.location.reload()
Ayoola Falola
quelle
3

Verwenden Sie diese Schaltfläche, um die Seite zu aktualisieren

DEMO

<input type="button" value="Reload Page" onClick="document.location.reload(true)">
Meysam
quelle
2

Mit der Methode reload () wird das aktuelle Dokument neu geladen.

Die reload () -Methode entspricht der Schaltfläche zum erneuten Laden in Ihrem Browser.

Standardmäßig lädt die reload () -Methode die Seite aus dem Cache neu. Sie können sie jedoch zwingen, die Seite vom Server neu zu laden, indem Sie den forceGet-Parameter auf true setzen: location.reload (true).

        location.reload();
GeniusGeek
quelle
-3

Sie können einfach verwenden

window.location=document.URL

Dabei erhält document.URL die aktuelle Seiten-URL und window.location lädt sie neu.

Sanu Uthaiah Bollera
quelle
2
Moderne Browser ignorieren dies, da sich die href nicht ändert, sodass sie nicht neu geladen werden muss. Sie sollten dies nur als Failover für alte Browser ohne Neuladen verwenden: (location.reload? Location.reload (): location = document.URL)
Radek Pech