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

84

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!"
John Doeherskij
quelle
Anstatt das normale Benutzerverhalten zu hacken, versuchen Sie nicht zu verstehen, warum Ihr Code beim Laden der Seite nicht funktioniert und Sie die Seite zum erneuten Laden benötigen.
Lelio Faieta
2
@LelioFaieta Ich ändere Klassen, um Änderungen anzuzeigen. Wenn der Benutzer auf etwas klickt, ändert sich der Wert in der Datenbank über Ajax. Wenn der Ajax fertig ist, cssge cahnge zum Beispiel von onbis off. 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)
auslöste
1
Verwenden Sie get oder post für Ihren Ajax-Anruf?
Lelio Faieta
1
@LelioFaieta part2 .. Ich benutze auch Datenattribut und es hat keine Auswirkung. Alles wäre toll, wenn die Seite neu geladen würde. Wenn ich auf dieser Seite F5 drücke, werden die Werte angezeigt, die er über Ajax geändert hat. Ich denke, dies ist ein Problem im Zusammenhang mit dem Browser-Chaching, wenn der CSS / HTML-Teil nicht vollständig neu geladen wird. Es wird erst nach Drücken von f5 neu
geladen
@LelioFaieta $.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.
John Doeherskij

Antworten:

86

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:

Leonid Vasilev
quelle
Könnten Sie dem Benutzer Dhiraj helfen, dass er auf dem richtigen Weg ist, aber zweimal nachlädt? Übrigens habe ich es versucht, window.addEventListener( "unload", function() {} );aber es tut nichts, der Zurück-Knopf funktioniert wie zuvor, keine Änderung; (
John Doeherskij
Wie entlade ich BFCache? Könnten Sie Ihren Code mit genaueren Informationen aktualisieren? Diese Zeile window.addEventListener( "unload", function() {} );funktioniert nicht. Ist es vollständig?
John Doeherskij
Das Durchlaufen des Chrome-Verlaufs ist etwas verwirrend. Bitte versuchen Sie es mit einer pageshowLösung.
Leonid Vasilev
1
Ich sehe immer noch ein doppeltes Laden (einmal der Standard-Firefox (zeigt die alte Seite; vielleicht aus dem Browser-Cache?) Und dann wird das Skript erneut ausgelöst. Das Skript lädt es auf die tatsächliche Stufe neu, aber ich sehe immer noch den alten Status für eine Sekunde oder so; (Ich habe den Code drinnen$(document).ready( function() { /* code here */ });
John Doeherskij
3
window.performance.navigationist veraltet. Um den Navigationstyp zu überprüfen, den ich verwendet habewindow.performance.getEntriesByType("navigation")[0].type === "back_forward"
zero01alpha
49

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

Lotok
quelle
2
Dieser Check hat bei mir funktioniert. Was bedeutet die 2 genau?
RitchieD
Dies funktionierte wie ein Zauber. Ich habe es ganz oben platziert. Die Seite wurde neu geladen, ohne dass ein anderes Skript geladen wurde.
NMathur
Das hat wie ein Zauber gewirkt. Toller Fund ... Es ist sehr schnell und zuverlässig, nicht wie andere Antworten, die im Vergleich dazu langsam waren. TY
weBBer
Dieser arbeitete mit Chrome Browser und nicht mit Firefox
Praaveen VR
7
Dies ist veraltet (siehe w3c.github.io/navigation-timing/#obsolete ).
David Vielhuber
22

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

Francesco
quelle
@RitchieD - Ab heute funktioniert dies in IE11 unter Windows 10 gut. Hinweis: Ich verwende EDGE nicht.
Dan G
Nur kein Fan von "Just Use JQuery" -Antworten, sorry
Steven
Ich würde "true" aus dem Neuladen entfernen, um den HTTP-Cache zu verwenden. In den meisten Fällen macht es keinen Sinn, die Assets neu zu laden.
Konyak
15

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);
}
Geigenbauer
quelle
Dies ist die aktuellste Antwort
Java_Man
Dieser Code muss mit dem Code in Leonids Antwort oben kombiniert werden.
Gornvix
Das funktioniert gut für mich. Ich habe in den neuesten Versionen von Chrome, Firefox, IE und Edge getestet. Ich habe Safari auf dem Mac nicht überprüft.
Tasawar Hussain
6

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.

Dhiraj
quelle
1
Es funktioniert nicht. Ich habe Firefox und Chrome ausprobiert und es funktioniert nicht.
John Doeherskij
Bitte überprüfen Sie meine aktualisierte Frage, vielleicht haben Sie und andere mich missverstanden. Es ist jetzt viel klarer, was ich erreichen möchte. Vielen Dank.
John Doeherskij
Ja, ich habe es falsch verstanden. Vielen Dank, dass Sie die Frage im Detail aktualisiert haben.
Dhiraj
jetzt funktioniert es. Allerdings wird es 2 Mal neu geladen und es sieht ein bisschen komisch aus. Zum ersten Mal wird es neu geladen. nichts - dies ist wahrscheinlich das defaut Browserverhalten. Beim zweiten Neuladen - über Ihr Skript - werden die Werte so aktualisiert, wie es sein sollte, aber es sieht schlecht aus, da es zweimal neu geladen wird. Irgendeine Idee, wie man es ein wenig verbessern kann, damit das Nachladen besser aussieht oder nur einmal nachgeladen wird? In Chrome sieht es besser aus als in Firefox, das Neuladen ist schneller, aber ich sehe immer noch den ursprünglichen Back-Status (für eine Sekunde oder eine halbe Sekunde) und das erneute Laden des Skripts erfolgt erst danach.
John Doeherskij
Irgendeine neue Idee, wie man die "doppelte Last" repariert?
John Doeherskij
6

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");
Marlon
quelle
Beste Lösung, aber hier ist die Version, die ich verwendet habe. Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetMaxAge(TimeSpan.Zero); Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); Response.Cache.SetNoStore();
Eifer
2

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

Java_Man
quelle
1

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);
});
Anton Stepanenkov
quelle
Nicht funktioniert; (Ich habe versucht, 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.
John Doeherskij
Ich habe die Antwort bearbeitet und versuche eine neue Lösung. Sie müssen den Status vorher drücken, sonst erhalten Sie kein Popstate-Ereignis.
Anton Stepanenkov
Sie haben wahrscheinlich falsch verstanden, was ich will. Ich habe meine Frage mit einer detaillierteren Beschreibung aktualisiert. Bitte überprüfen Sie es erneut, wenn Sie Zeit haben, danke.
John Doeherskij
0

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

<meta http-equiv="Pragma" content="no-cache">
Rajesh Kharatmol
quelle
Dies lädt die Seite nicht neu, wenn sie zurück ist, was OP angefordert hat
Timberman
-1

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

muhammed aslam
quelle
Das funktioniert bei mir nicht. Was bedeutet die "0"?
Vincent