Wie erzwinge ich das Neuladen einer Seite, wenn ich die Zurück-Schaltfläche des Browsers verwende?

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:

1. Benutzer besucht Seite1.
2. während auf Seite 1 - er klickt auf einen Link zu Seite 2.
3. Er wird auf Seite 2 umgeleitet
4. Jetzt (wichtiger Teil!) klickt er im Browser auf die Schaltfläche "Zurück", weil er zu Seite 1 zurückkehren möchte
5. Er ist wieder auf Seite 1 - und jetzt wird Seite 1 neu geladen und etwas wird alarmiert wie "Du bist zurück!"

Sie können pageshowEreignis 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:

• Arbeiten mit BFCache- Artikel zu MDN
• WebKit Page Cache II - Das Entladeereignis von Brady Eidson
• Pageshow- Ereignisreferenz auf MDN
• Frage zu Ajax, Zurück-Schaltfläche und DOM-Updates
• JavaScript - bfcache / pageshow event - event.persisted immer auf false gesetzt? Frage

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

performance.navigation.type

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 2zeigt 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 Weg

Diese 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

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..

Da performance.navigationes jetzt veraltet ist, können Sie dies versuchen:

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

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.

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");

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

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);
});

Verwenden Sie das folgende Meta-Tag in Ihrer HTML-Header-Datei. Dies funktioniert für mich.

<meta http-equiv="Pragma" content="no-cache">

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 .......

Details finden Sie hier