Wie kann ich eine Seite mit jQuery aktualisieren?
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.
Dies sollte auf allen Browsern auch ohne jQuery funktionieren:
location.reload();
Es gibt mehrere Unbegrenzte Möglichkeiten, eine Seite mit JavaScript zu aktualisieren:
location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
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:
window.location = window.location
window.self.window.self.window.window.location = window.location
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>
Viele Möglichkeiten werden funktionieren, nehme ich an:
window.location.reload();
history.go(0);
window.location.href=window.location.href;
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.
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.
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 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.
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 nichtlocation.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.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.
Die Funktion jQuery Load
kann auch eine Seitenaktualisierung durchführen:
$('body').load('views/file.html', function () {
$(this).fadeIn(5000);
});
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:
$.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
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 erhaltenhttp-equiv
-Aktualisierung behebt diesDa 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);
});
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.
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>
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();
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', '');
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);
Einfache Javascript-Lösung:
location = location;
<button onClick="location = location;">Reload</button>
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>
benutzen
location.reload();
oder
window.location.reload();
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>
In JavaScript ist es am kürzesten.
location = '';
Das funktioniert für mich:
document.location.reload();