Wie kann ich eine Seite mit jQuery aktualisieren?

Wie kann ich eine Seite mit jQuery aktualisieren?

Verwendung location.reload():

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

Die reload()Funktion verwendet einen optionalen Parameter, der so eingestellt werden kann, dass trueein erneutes Laden vom Server anstelle des Caches erzwungen wird. Der Parameter ist standardmäßig so eingestellt false, dass die Seite standardmäßig aus dem Cache des Browsers neu geladen werden kann.

Dies sollte in allen Browsern auch ohne jQuery funktionieren:

location.reload();

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 übergeben true.

Sie können die Liste weiterhin kreativ gestalten:

• window.location = window.location
• window.self.window.self.window.window.location = window.location
• ... und andere 534 Möglichkeiten

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>

Ich nehme an, es werden viele Möglichkeiten funktionieren:

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

Gehen Sie folgendermaßen vor, um eine Seite mit jQuery neu zu laden:

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

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

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

window.location = window.location.pathname;

anstatt

window.location.reload();

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

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.

Möglicherweise möchten Sie verwenden

location.reload(forceGet)

forceGet ist boolesch und optional.

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

Setzen Sie diesen Parameter auf true, wenn Sie den Browser zwingen möchten, die Seite vom Server abzurufen, um auch den Cache zu entfernen.

Oder nur

location.reload()

wenn Sie schnell und einfach mit Caching wollen.

Drei Ansätze mit unterschiedlichen Verhaltensweisen im Zusammenhang mit dem Cache:

• location.reload(true)

  In Browsern, die den forcedReloadParameter von implementieren location.reload(), wird neu geladen, indem eine neue Kopie der Seite und aller ihrer Ressourcen (Skripte, Stylesheets, Bilder usw.) abgerufen wird. Es werden keine Ressourcen aus dem Cache bereitgestellt. Es werden neue Kopien vom Server abgerufen, ohne dass in der Anforderung Header if-modified-sinceoder if-none-matchHeader gesendet werden .

  Entspricht dem Benutzer, der in Browsern, in denen dies möglich ist, ein "Hard Reload" durchführt.

  Beachten Sie, dass die Übergabe truean location.reload()in Firefox (siehe MDN ) und Internet Explorer (siehe MSDN ) unterstützt wird, jedoch nicht universell unterstützt wird und weder Teil der W3 HTML 5-Spezifikation noch der W3-HTML 5.1-Entwurfsspezifikation oder des WHATWG HTML Living Standard ist .

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

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

  Lädt die Seite neu, ruft eine neue, nicht zwischengespeicherte Kopie des Seiten-HTML selbst ab und führt RFC 7234- Revalidierungsanforderungen für alle Ressourcen (wie Skripte) durch, die der Browser zwischengespeichert hat, auch wenn sie frisch sind. RFC 7234 ermöglicht dem Browser die Bereitstellung sie ohne Verlängerung.

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

  Dies entspricht dem einfachen Drücken der Schaltfläche "Aktualisieren" in seinem Browser.

• location = location(oder unendlich viele andere mögliche Techniken, die das Zuweisen zu locationoder zu seinen Eigenschaften beinhalten)

  Funktioniert nur, wenn die URL der Seite keinen Fragid / Hashbang enthält!

  Lädt die Seite ohne Erneutes Abrufen oder Revalidierung keine frischen Mittel aus dem Cache. Wenn der HTML-Code der Seite selbst aktuell ist, wird die Seite neu geladen, ohne dass HTTP-Anforderungen ausgeführt werden.

  Dies entspricht (aus Caching-Sicht) dem Benutzer, der die Seite in 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 festgestellt.

Zusammenfassend möchten Sie also Folgendes verwenden:

• location = locationfür maximale Nutzung des Caches, solange die URL der Seite keinen Hash enthält. In diesem Fall funktioniert dies nicht
• location.reload(true)um neue Kopien aller Ressourcen abzurufen, ohne sie erneut zu validieren (obwohl dies nicht allgemein unterstützt wird und sich location.reload()in einigen Browsern wie Chrome nicht anders verhält )
• location.reload() um den Effekt des Benutzers originalgetreu wiederzugeben, klicken Sie auf die Schaltfläche "Aktualisieren".

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

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

Die jQuery- LoadFunktion kann auch eine Seitenaktualisierung durchführen:

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

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

Einfache einfache JavaScript-Lösung :

Der einfachste Weg ist eine einzeilige Lösung, die auf geeignete Weise platziert wird:

location.reload();

Was viele Leute hier vermissen, weil sie hoffen, einige "Punkte" zu bekommen, ist, dass die reload () - Funktion selbst einen Booleschen Wert als Parameter bietet (Details: https://developer.mozilla.org/en-US/docs/Web / API / Location / reload ).

Die Methode Location.reload () lädt die Ressource von der aktuellen URL neu. Der optionale eindeutige Parameter ist ein Boolescher Wert. Wenn dies der Fall ist, wird die Seite immer vom Server neu geladen. Wenn es falsch oder nicht angegeben ist, lädt der Browser die Seite möglicherweise erneut aus dem Cache.

Dies bedeutet, dass es zwei Möglichkeiten gibt:

Lösung 1: Erzwingen Sie das Neuladen der aktuellen Seite vom Server

location.reload(true);

Lösung 2: Neuladen aus dem Cache oder 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 abzuhören, würde ich empfehlen, die Methode ".on ()" anstelle von ".click" oder anderen Ereignis-Wrappern zu verwenden. Eine geeignetere Lösung wäre beispielsweise:

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

Hier ist eine Lösung, die eine Seite mit jQuery asynchron neu lädt. Es vermeidet das durch verursachte Flimmern window.location = window.location. Dieses Beispiel zeigt eine Seite, die wie in einem Dashboard kontinuierlich neu geladen wird. Es ist kampferprobt und läuft auf einem Informationsfernseher am 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:

• Die $.ajaxdirekte Verwendung von " like" führt dazu, $.get('',function(data){$(document.body).html(data)}) dass CSS / JS-Dateien im Cache kaputt gehen , selbst wenn Sie sie verwenden cache: true. Deshalb verwenden wir sieparseHTML
• parseHTMLfindet KEIN bodyTag so Ihren ganzen Körper braucht in einem extra div zu gehen, ich hoffe das Nugget Wissen Sie eines Tages hilft, können Sie sich vorstellen , wie wir die ID für das gewähltdiv
• Verwenden Sie diese Option http-equiv="refresh"nur für den Fall, dass beim Javascript / Server-Schluckauf etwas schief geht. Die Seite wird NOCH neu geladen, ohne dass Sie einen Anruf erhalten
• Dieser Ansatz verliert wahrscheinlich irgendwie Speicher, die http-equivAktualisierung behebt das

ich fand

window.location.href = "";

oder

window.location.href = null;

macht auch eine Seitenaktualisierung.

Dies macht es sehr viel einfacher, die Seite neu zu laden und Hash zu entfernen. Dies ist sehr schön, wenn ich AngularJS im iOS-Simulator verwende, damit ich die App nicht erneut ausführen muss.

Sie können die JavaScript- location.reload() Methode verwenden. Diese Methode akzeptiert einen booleschen Parameter. trueoder false. Wenn der Parameter ist true; Die Seite wurde immer vom Server neu geladen. Wenn es so ist false; Dies ist die Standardeinstellung oder lädt die Seite mit einem leeren Parameter-Browser aus dem Cache neu.

Mit trueParameter

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

Mit default/ falseParameter

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

Verwenden von jquery

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

Sie benötigen nichts von jQuery, um eine Seite mit reinem JavaScript neu zu laden. Verwenden Sie einfach die Reload-Funktion für die Positionseigenschaft wie folgt:

window.location.reload();

Standardmäßig wird die Seite über den Browser-Cache neu geladen (falls vorhanden) ...

Wenn Sie das Neuladen der Seite erzwingen möchten, übergeben Sie einfach einen wahren Wert, um die Methode wie unten neu zu laden ...

window.location.reload(true);

Auch wenn Sie sich bereits im Fensterbereich befinden , können Sie das Fenster entfernen und Folgendes tun:

location.reload();

verwenden

location.reload();

oder

window.location.reload();

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>

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

Ich wollte einen Iframe von einer Seite ausblenden, wenn h3ich auf oh an klickte. Für mich hat es funktioniert, aber ich konnte nicht auf das Element klicken, mit dem ich das anzeigen konnteiframe , es sei denn, ich habe den Browser manuell aktualisiert ... nicht ideal.

Ich habe folgendes versucht:

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

Das Mischen von einfachem 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);

Alle Antworten hier sind gut. Da die Frage zum erneuten Laden der Seite mit angibtjqueryIch dachte nur, 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 ~}

So werden Sie verstehen, dass die Grundlage von jquery, oder jquery basiert auf Javascript. Also mit rein gehenJavascript ist viel besser, wenn es um einfache Dinge geht.

Aber wenn Sie eine brauchen jquery Lösung, hier ist eine.

$(location).attr('href', '');

Es gibt viele Möglichkeiten, die aktuellen Seiten neu zu laden, aber mit diesen Ansätzen können Sie sehen, dass die Seite aktualisiert wird, aber nicht mit wenigen Cache-Werten vorhanden ist. Beheben Sie also dieses Problem, oder verwenden Sie den folgenden Code, wenn Sie harte Anforderungen stellen möchten.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Einfache Javascript-Lösung:

 location = location; 

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

Wahrscheinlich kürzeste (12 Zeichen) - Nutzung Geschichte

history.go()

Sie können es auf zwei Arten schreiben. 1. ist die Standardmethode zum Neuladen der Seite, die auch als einfache Aktualisierung bezeichnet wird

location.reload(); //simple refresh

Und eine andere nennt man die harte Auffrischung . Hier übergeben Sie den booleschen Ausdruck und setzen ihn auf true. Dadurch wird die Seite neu geladen, wodurch der ältere Cache zerstört und der Inhalt von Grund auf neu angezeigt wird.

location.reload(true);//hard refresh

In JavaScript ist es am kürzesten.

window.location = '';

$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

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

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

Verwenden Sie diese Option, wenn Sie nur ein jQuery-Gefühl für Ihren Code wünschen und sich nicht um die Geschwindigkeit / Leistung des Codes kümmern .

Wählen Sie einfach 1 bis 10 aus, die Ihren Anforderungen entsprechen, oder fügen Sie basierend auf dem Muster und den Antworten zuvor 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>