Ich muss irgendwie erkennen, dass der Benutzer eine Zurück-Schaltfläche des Browsers gedrückt hat, und die Seite mit Aktualisierung (Neuladen des Inhalts und CSS) mithilfe von jquery neu laden.
Wie kann man eine solche Aktion über jquery erkennen?
Denn im Moment werden einige Elemente nicht neu geladen, wenn ich die Zurück-Schaltfläche in einem Browser verwende. Aber wenn ich Links auf der Website verwende, wird alles aktualisiert und korrekt angezeigt.
WICHTIG!
Einige Leute haben wahrscheinlich falsch verstanden, was ich will. Ich möchte die aktuelle Seite nicht aktualisieren. Ich möchte die geladene Seite aktualisieren, nachdem ich die Zurück-Taste gedrückt habe. Folgendes meine ich ausführlicher:
- Benutzer besucht Seite1.
- während auf Seite 1 - er klickt auf einen Link zu Seite 2.
- Er wird auf Seite 2 umgeleitet
- Jetzt (wichtiger Teil!) klickt er im Browser auf die Schaltfläche "Zurück", weil er zu Seite 1 zurückkehren möchte
- Er ist wieder auf Seite 1 - und jetzt wird Seite 1 neu geladen und etwas wird alarmiert wie "Du bist zurück!"
javascript
jquery
browser
browser-cache
page-refresh
John Doeherskij
quelle
quelle
on
bisoff
. Und es ist in Ordnung, es ist in db gespeichert, Benutzer sehen alles richtig. Jetzt klickt er auf einen anderen Link. Zum Beispiel über uns Seite, richtig? Jetzt ist er auf der Seite über uns. Be beschließt, zur vorherigen Seite zurückzukehren und im Browser auf die Schaltfläche "Zurück" zu klicken. Und wenn er zurück ist, sieht er die Änderungen auf der Seite, als der Browser die Seite zeigte (wahrscheinlich einige Browser-Cahing), bevor er den Ajax (Ein / Aus-Klassen)$.ajax({ url: url, method: 'post', processData: false, contentType: false, cache: false, dataType: 'json', data: formData, })
Glaubst du, dass dies von Ajax sein könnte? Es wäre großartig, wenn dies der Fall wäre.Antworten:
Sie können
pageshow
Ereignis verwenden, um Situationen zu behandeln, in denen der Browser durch Verlaufsüberquerung zu Ihrer Seite navigiert:window.addEventListener( "pageshow", function ( event ) { var historyTraversal = event.persisted || ( typeof window.performance != "undefined" && window.performance.navigation.type === 2 ); if ( historyTraversal ) { // Handle page restore. window.location.reload(); } });
Beachten Sie, dass möglicherweise auch ein HTTP-Cache beteiligt ist. Sie müssen die richtigen cachebezogenen HTTP-Header auf dem Server festlegen, um nur die Ressourcen zwischenzuspeichern, die zwischengespeichert werden müssen. Sie können auch ein erzwungenes Neuladen durchführen, um den Browser anzuweisen, den HTTP-Cache zu ignorieren :
window.location.reload( true )
. Aber ich denke nicht, dass es die beste Lösung ist.Weitere Informationen finden Sie unter:
quelle
window.addEventListener( "unload", function() {} );
aber es tut nichts, der Zurück-Knopf funktioniert wie zuvor, keine Änderung; (window.addEventListener( "unload", function() {} );
funktioniert nicht. Ist es vollständig?pageshow
Lösung.$(document).ready( function() { /* code here */ });
window.performance.navigation
ist veraltet. Um den Navigationstyp zu überprüfen, den ich verwendet habewindow.performance.getEntriesByType("navigation")[0].type === "back_forward"
Es ist schon eine Weile her, dass dies veröffentlicht wurde, aber ich habe eine elegantere Lösung gefunden, wenn Sie keine alten Browser unterstützen müssen.
Sie können eine Überprüfung mit durchführen
Die Dokumentation einschließlich Browserunterstützung finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
Um zu sehen, ob die Seite mit back aus dem Verlauf geladen wurde, können Sie dies tun
if(performance.navigation.type == 2){ location.reload(true); }
Das
2
zeigt an, dass auf die Seite zugegriffen wurde, indem Sie in den Verlauf navigieren. Andere Möglichkeiten sind:0:
Der Zugriff auf die Seite erfolgte über einen Link, ein Lesezeichen, eine Formularübermittlung oder ein Skript oder durch Eingabe der URL in die Adressleiste.1:
Der Zugriff auf die Seite erfolgte durch Klicken auf die Schaltfläche Neu laden oder über die Methode Location.reload ().255:
Jeder andere WegDiese werden hier detailliert beschrieben: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
Hinweis Performance.navigation.type ist jetzt zugunsten von PerformanceNavigationTiming.type veraltet, das 'navig' / 'reload' / 'back_forward' / 'prerender' zurückgibt: https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / type
quelle
Verwenden Sie einfach jquery:
jQuery( document ).ready(function( $ ) { //Use this inside your document ready jQuery $(window).on('popstate', function() { location.reload(true); }); });
Das Obige funktioniert zu 100%, wenn auch mit Ajax auf die Schaltfläche Zurück oder Vorwärts geklickt wurde.
Ist dies nicht der Fall, muss in einem anderen Teil des Skripts eine Fehlkonfiguration vorliegen.
Beispielsweise wird es möglicherweise nicht neu geladen, wenn so etwas wie eines der Beispiele im vorherigen Beitrag verwendet wird
window.history.pushState('', null, './');
Wenn Sie es verwenden,
history.pushState();
stellen Sie sicher, dass Sie es richtig verwenden.Vorschlag in den meisten Fällen benötigen Sie nur:
history.pushState(url, '', url);
Keine window.history ... und stellen Sie sicher, dass die URL definiert ist.
Hoffentlich hilft das..
quelle
Da
performance.navigation
es jetzt veraltet ist, können Sie dies versuchen:var perfEntries = performance.getEntriesByType("navigation"); if (perfEntries[0].type === "back_forward") { location.reload(true); }
quelle
Sie sollten eine versteckte Eingabe als Aktualisierungsindikator mit dem Wert "no" verwenden:
<input type="hidden" id="refresh" value="no">
Mit jQuery können Sie jetzt den Wert überprüfen:
$(document).ready(function(e) { var $input = $('#refresh'); $input.val() == 'yes' ? location.reload(true) : $input.val('yes'); });
Wenn Sie auf die Schaltfläche "Zurück" klicken, behalten die Werte in ausgeblendeten Feldern den gleichen Wert wie beim ursprünglichen Verlassen der Seite.
Wenn Sie die Seite zum ersten Mal laden, lautet der Wert der Eingabe "Nein". Wenn Sie zur Seite zurückkehren, wird "Ja" angezeigt und Ihr JavaScript-Code löst eine Aktualisierung aus.
quelle
Eine Alternative, die das Problem für mich gelöst hat, besteht darin, den Cache für die Seite zu deaktivieren. Dadurch kann der Browser die Seite vom Server abrufen, anstatt eine zwischengespeicherte Version zu verwenden:
Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate"); Response.AppendHeader("Pragma", "no-cache"); Response.AppendHeader("Expires", "0");
quelle
Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetMaxAge(TimeSpan.Zero); Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); Response.Cache.SetNoStore();
Derzeit ist dies die aktuellste Methode zum erneuten Laden von Seiten, wenn der Benutzer auf die Schaltfläche "Zurück" klickt.
const [entry] = performance.getEntriesByType("navigation"); // Show it in a nice table in the developer console console.table(entry.toJSON()); if (entry["type"] === "back_forward") location.reload();
Siehe hier für die Quelle
quelle
Nachladen ist einfach. Du solltest benutzen:
location.reload(true);
Und zurück zu erkennen ist:
window.history.pushState('', null, './'); $(window).on('popstate', function() { location.reload(true); });
quelle
alert('test');
anstatt,location.reload(true);
aber immer noch nichts. Ich habe Firefox und Chrome versucht, aber nichts. Ich habe versucht, innerhalb des Dokuments bereit, außen, aber nichts funktioniert. Wenn ich einfache Warnung () oder einen Abfragecode versuche, der funktioniert. I. Ich habe viel JQuery-Code auf meiner Seite und es funktioniert.Verwenden Sie das folgende Meta-Tag in Ihrer HTML-Header-Datei. Dies funktioniert für mich.
<meta http-equiv="Pragma" content="no-cache">
quelle
Ich habe die beste Antwort gefunden und es funktioniert perfekt für mich
Verwenden Sie einfach dieses einfache Skript in Ihrem Link
<A HREF="javascript:history.go(0)">next page</A>
oder das Button-Click-Ereignis
<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">
Wenn Sie dies verwenden, aktualisieren Sie zuerst Ihre Seite und gehen dann zur nächsten Seite. Wenn Sie zurückkehren, hat sie den zuletzt aktualisierten Status.
Ich habe es in einem CAS-Login verwendet und gebe mir, was ich will. Ich hoffe es hilft .......
quelle