wake-up-neo.com

Wie kann ich eine Seite mit jQuery aktualisieren?

Wie kann ich eine Seite mit jQuery aktualisieren?

javascriptjqueryrefreshreload
2185
luca

Verwenden Sie location.reload() :

$('#something').click(function() {
    location.reload();
});

Die Funktion reload() benötigt einen optionalen Parameter, der auf true gesetzt werden kann, um ein Neuladen vom Server anstelle des Caches zu erzwingen. Der Parameter ist standardmäßig auf false eingestellt, sodass die Seite standardmäßig aus dem Cache des Browsers geladen wird.

3519
Roy

Dies sollte auf allen Browsern auch ohne jQuery funktionieren:

location.reload();
429
Thorben

Es gibt mehrere Unbegrenzte Möglichkeiten, eine Seite mit JavaScript zu aktualisieren:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)

  6. location.reload(false)

    Wenn wir das Dokument erneut vom Webserver abrufen müssten (z. B. wenn sich der Dokumentinhalt dynamisch ändert), würden wir das Argument als true übergeben.

Sie können die Liste kreativ fortsetzen:

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
424
Ionică Bizău

Viele Möglichkeiten werden funktionieren, nehme ich an:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
193
David

So laden Sie eine Seite mit jQuery erneut:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

Der Ansatz, den ich hier verwendete, war Ajax jQuery. Ich habe es auf Chrome 13 getestet. Dann füge ich den Code in den Handler ein, der das Reload auslöst. Die URL ist "", was diese Seite bedeutet.

117
Peter

Wenn die aktuelle Seite durch eine Anforderung von POST geladen wurde, möchten Sie sie möglicherweise verwenden

window.location = window.location.pathname;

anstatt

window.location.reload();

weil window.location.reload() zur Bestätigung auffordert, wenn auf einer Seite aufgerufen wird, die von einer POST - Anforderung geladen wurde.

100
SumairIrshad

Die Frage sollte sein

So aktualisieren Sie eine Seite mit JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Sie haben die Qual der Wahl.

59
JohnP

Möglicherweise möchten Sie verwenden

location.reload(forceGet)

forceGet ist ein Boolean und optional.

Der Standardwert ist false, wodurch die Seite aus dem Cache geladen wird.

Setzen Sie diesen Parameter auf "true", wenn der Browser zwingen soll, die Seite vom Server abzurufen, um auch den Cache zu löschen.

Oder nur

location.reload()

wenn Sie schnell und einfach mit dem Caching wollen.

51
Pinch

Drei Ansätze mit unterschiedlichen Cache-bezogenen Verhalten:

  • location.reload(true)

    In Browsern, die den forcedReload-Parameter von location.reload() implementieren, wird durch Laden einer neuen Kopie der Seite und aller zugehörigen Ressourcen (Skripte, Stylesheets, Bilder usw.) erneut geladen. Liefert keine any -Ressourcen aus dem Cache - holt frische Kopien vom Server, ohne if-modified-since- oder if-none-match-Header in der Anforderung zu senden.

    Entspricht dem Benutzer, der in Browsern ein "hartes Nachladen" vornimmt, sofern dies möglich ist.

    Beachten Sie, dass die Weitergabe von true an location.reload() in Firefox (siehe MDN ) und Internet Explorer (siehe MSDN ) unterstützt wird, jedoch nicht universell unterstützt wird und nicht Teil von die W3 HTML 5-Spezifikation , noch die W3-Entwurfs-HTML 5.1-Spezifikation , noch der WHATWG HTML Living Standard .

    In nicht unterstützenden Browsern wie Google Chrome verhält sich location.reload(true) genauso wie location.reload().

  • location.reload() oder location.reload(false)

    Lädt die Seite neu, holt eine neue, nicht zwischengespeicherte Kopie des Seiten-HTML-Objekts selbst ab und führt RFC 7234 -Validierungsanfragen für alle Ressourcen (z. B. Skripts) aus, die der Browser zwischengespeichert hat, selbst wenn sie _ sind fresh are RFC 7234 erlaubt dem Browser, sie ohne erneute Validierung zu bedienen.

    Wie genau der Browser seinen Cache beim Ausführen eines location.reload()-Aufrufs verwenden soll, wird, soweit ich das beurteilen kann, nicht angegeben oder dokumentiert. Ich habe das Verhalten oben durch Experimente bestimmt.

    Dies ist gleichbedeutend damit, dass der Benutzer einfach die Schaltfläche "Aktualisieren" in seinem Browser drückt.

  • location = location (oder unendlich viele andere mögliche Techniken, bei denen location oder ihren Eigenschaften zugewiesen wird)

    Funktioniert nur, wenn die URL der Seite keinen fragid/hashbang enthält!

    Lädt die Seite neu, ohne die Ressourcen any _ ​​ fresh aus dem Cache erneut abzurufen oder erneut zu validieren. Wenn der HTML-Code der Seite frisch ist, wird die Seite neu geladen, ohne dass HTTP-Anforderungen ausgeführt werden.

    Dies entspricht (aus einer Zwischenspeicherungsperspektive) dem Benutzer, der die Seite auf einer neuen Registerkarte öffnet.

    Wenn die URL der Seite jedoch einen Hash enthält, hat dies keine Auswirkungen.

    Auch hier ist das Caching-Verhalten meines Wissens nicht spezifiziert; Ich habe es durch Testen ermittelt.

Zusammenfassend möchten Sie also Folgendes verwenden:

  • location = location für die maximale Verwendung des Cache, solange die Seite keinen Hash in ihrer URL hat, in diesem Fall funktioniert das nicht
  • location.reload(true) zum Abrufen neuer Kopien aller Ressourcen ohne erneute Validierung (obwohl nicht allgemein unterstützt und verhält sich in einigen Browsern, wie Chrome, nicht anders als location.reload())
  • location.reload(), um die Wirkung des Benutzers durch Klicken auf die Schaltfläche "Aktualisieren" originalgetreu wiederzugeben.
32
Mark Amery

window.location.reload() wird vom Server neu geladen und lädt alle Ihre Daten, Skripte, Bilder usw. erneut.

Wenn Sie also nur den HTML-Code aktualisieren möchten, wird window.location = document.URL viel schneller und mit weniger Verkehr zurückgegeben. Die Seite wird jedoch nicht neu geladen, wenn die URL einen Hash (#) enthält.

23
user762330

Die Funktion jQuery Load kann auch eine Seitenaktualisierung durchführen:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
15
Suleman Mirza

Hier ist eine Lösung, die eine Seite asynchron mit jQuery neu lädt. Dadurch wird das durch window.location = window.location verursachte Flimmern vermieden. Dieses Beispiel zeigt eine Seite, die wie in einem Dashboard kontinuierlich neu geladen wird. Es ist kampferprobt und läuft auf einem Informationsdisplay im Times Square.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Anmerkungen:

  • Wenn Sie $.ajax direkt wie $.get('',function(data){$(document.body).html(data)})verwenden, werden css/js-Dateien Cache-Busted erhalten, auch wenn Sie cache: true verwenden. Deshalb verwenden Sie parseHTML
  • parseHTML findet KEIN body tag , also muss Ihr ganzer Körper in ein extra div gehen. Ich hoffe, dieses Wissen hilft Ihnen eines Tages dafür div
  • Verwenden Sie http-equiv="refresh" nur für den Fall, dass bei Javascript/Server-Problemen Probleme auftreten, wird die Seite AUSSCHLIESSLICH neu geladen, ohne dass Sie einen Anruf erhalten
  • Dieser Ansatz verliert wahrscheinlich etwas Speicher, die http-equiv-Aktualisierung behebt dies
13
William Entriken

Da die Frage generisch ist, versuchen wir, mögliche Lösungen für die Antwort zusammenzufassen:

Einfache JavaScript-Lösung:

Der einfachste Weg ist eine einzeilige Lösung, die entsprechend platziert wird:

location.reload();

Was viele Leute hier vermissen, weil sie auf einige "Punkte" hoffen, ist, dass die Funktion reload () selbst einen Booleschen Parameter als Parameter anbietet (Details: https://developer.mozilla.org/en-US/docs/Web/API/Standort/Neu laden ).

Die Location.reload () -Methode lädt die Ressource aus dem aktuellen .__ neu. URL. Sein optionaler einzigartiger Parameter ist ein boolescher Parameter. true, bewirkt, dass die Seite immer vom Server neu geladen wird. Wenn es ist false oder nicht angegeben, lädt der Browser die Seite möglicherweise von seiner Zwischenspeicher.

Dies bedeutet, dass es zwei Möglichkeiten gibt:

Lösung1: Erzwingt das Neuladen der aktuellen Seite vom Server

location.reload(true);

Lösung2: Neuladen vom Cache oder vom Server (basierend auf dem Browser und Ihrer Konfiguration)

location.reload(false);
location.reload();

Und wenn Sie es mit jQuery kombinieren möchten, um ein Ereignis anzuhören, würde ich empfehlen, die Methode ".on ()" anstelle von ".click" oder andere Ereignis-Wrapper, z. Eine richtigere Lösung wäre:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});
12
Fer To

Ich fand

window.location.href = "";

oder

window.location.href = null;

macht auch eine Seite aktualisieren.

Dies macht es sehr viel einfacher, die Seite neu zu laden, indem ein beliebiger Hash entfernt wird .. Das ist sehr schön, wenn ich AngularJS im iOS-Simulator verwende, sodass ich die App nicht erneut ausführen muss.

11
Mujah Maskey

Sie können JavaScript location.reload() - Methode ..__ verwenden. Diese Methode akzeptiert einen booleschen Parameter. true oder false. Wenn der Parameter true ist; Die Seite wurde immer vom Server neu geladen. Wenn es false ist; Dies ist die Standardeinstellung, oder laden Sie die Seite mit leerem Parameter-Browser aus dem Cache.

Mit dem Parameter true

<button type="button" onclick="location.reload(true);">Reload page</button>

Mit dem Parameter default/false

 <button type="button" onclick="location.reload();">Reload page</button>

Jquery verwenden

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>
5
Poorna Senani Gamage

Sie müssen brauchen nichts von jQuery, um eine Seite mit pure JavaScript neu zu laden - verwenden Sie einfach die reload-Funktion für die location-Eigenschaft wie folgt:

window.location.reload();

Standardmäßig wird die Seite mithilfe des Browser-Cache (falls vorhanden) neu geladen.

Wenn Sie das Neuladen der Seite erzwingen möchten, übergeben Sie einfach einen true - Wert, um die Methode wie folgt zu laden ...

window.location.reload(true);

Wenn Sie sich bereits in window scope befinden, können Sie window los und Folgendes tun:

location.reload();
5
Alireza

Alle Antworten hier sind gut. Da in der Frage das Neuladen der Seite mit - jquery angegeben ist, dachte ich nur daran, etwas mehr für zukünftige Leser hinzuzufügen.

jQuery ist eine plattformübergreifende JavaScript-Bibliothek, die das clientseitige Scripting von HTML vereinfachen soll.

~ Wikipedia ~

Sie werden verstehen, dass die Grundlage von jquery oder jquery auf javascript basiert. Also mit purem javascript zu fahren ist viel einfacher, wenn es um einfache Dinge geht.

Wenn Sie jedoch eine jquery -Lösung benötigen, finden Sie hier eine.

$(location).attr('href', '');
2
Roshana Pitigala

Wenn Sie jQuery verwenden und eine Aktualisierung durchführen möchten, fügen Sie Ihre jQuery in einer Javascript-Funktion hinzu:

Ich wollte einen iframe von einer Seite verbergen, wenn ich auf einen h3 klickte. Für mich funktionierte es, aber ich konnte nicht auf das Element klicken, mit dem ich zunächst die iframe anzeigen konnte, es sei denn, ich habe den Browser manuell aktualisiert .

Ich habe folgendes versucht:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

Das Mischen von normalem Jane-Javascript mit Ihrer jQuery sollte funktionieren.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);
2
J. Moreno

Einfache Javascript-Lösung: 

 location = location; 


<button onClick="location = location;">Reload</button>

1
hev1

Verwenden Sie onclick="return location.reload();" innerhalb des Button-Tags.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
1
Frank

benutzen 

location.reload();

oder

window.location.reload();
1
H.Ostwal

Hier sind einige Codezeilen, mit denen Sie die Seite mithilfe von jQuery - neu laden können.

Es verwendet den jQuery-Wrapper und extrahiert das native dom-Element. 

Verwenden Sie dies, wenn Sie nur ein jQuery-Gefühl in Ihrem Code haben möchten und Sie sich nicht für Geschwindigkeit/Leistung des Codes interessieren.

Wählen Sie einfach eine von 1 bis 10, die Ihren Bedürfnissen entspricht, oder fügen Sie je nach Muster und Antworten weitere hinzu.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
0
David Angulo

In JavaScript ist es am kürzesten.

location = '';
0
Na Nonthasen

Das funktioniert für mich:

document.location.reload();
0
GameMaster