wake-up-neo.com

Wie erzwingen Sie das erneute Laden einer Seite, wenn Sie die Zurück-Schaltfläche des Browsers verwenden?

Ich muss irgendwie feststellen, dass der Benutzer einen Browser-Zurück-Button gedrückt hat, und die Seite mit Refresh neu lädt (den Inhalt und CSS neu laden), indem Jquery verwendet wird.

Wie kann eine solche Aktion über jquery erkannt werden?

Denn im Moment werden einige Elemente nicht neu geladen, wenn ich die Zurück-Schaltfläche in einem Browser verwende. Wenn ich jedoch 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 Seite aktualisieren, die nach dem Drücken der Zurück-Taste geladen wird. Ich meine das genauer:

  1. benutzer besucht page1.
  2. auf Seite1 klickt er auf einen Link zu Seite2.
  3. er wird auf die Seite2 umgeleitet
  4. jetzt (wichtiger Teil!) klickt er im Browser auf die Schaltfläche "Zurück", da er zu Seite1 zurückkehren möchte
  5. er ist wieder auf der page1 - und jetzt wird die page1 neu geladen und etwas wie "you are back!"
javascriptjquerybrowserbrowser-cachepage-refresh
33
John Doeherskij

Sie können das pageshow -Ereignis verwenden, um Situationen zu behandeln, wenn der Browser durch Verlaufstraversal 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 auf dem Server die richtigen cachebezogenen HTTP-Header festlegen, um nur die Ressourcen zwischenzuspeichern, die zwischengespeichert werden müssen. Sie können auch ein erzwungenes Neuladen ausführen, um den Browser dazu zu veranlassen, 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:

39
Leonid Vasilev

Es ist eine Weile her, seit dies veröffentlicht wurde, aber ich habe eine elegantere Lösung gefunden, wenn Sie keine alten Browser unterstützen müssen.

Sie können mit überprüfen 

performance.navigation.type

Die Dokumentation einschließlich der Browserunterstützung finden Sie hier: https://developer.mozilla.org/de-DE/docs/Web/API/Performance/navigation

Um zu sehen, ob die Seite aus dem Verlauf geladen wurde, können Sie dies tun

if(performance.navigation.type == 2){
   location.reload(true);
}

Der 2 zeigt an, dass auf die Seite durch das Navigieren in den Verlauf zugegriffen wurde. Andere Möglichkeiten sind

0:Die Seite wurde aufgerufen, indem einem Link, einem Lesezeichen, einer Formularübermittlung oder einem Skript gefolgt wurde oder indem die URL in die Adressleiste eingegeben wurde.

1:Die Seite wurde durch Klicken auf die Schaltfläche Neu laden oder über die Methode Location.reload () aufgerufen.

255: Auf andere Weise

Diese sind hier detailliert aufgeführt: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

23
James

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 100%, wenn die Zurück- oder Vorwärts-Taste auch mit Ajax gedrückt wurde.

wenn dies nicht der Fall ist, muss in einem anderen Teil des Skripts eine falsche Konfiguration vorliegen. 

Zum Beispiel wird es möglicherweise nicht neu geladen, wenn etwas wie eines der Beispiele im vorherigen Beitrag verwendet wird window.history.pushState('', null, './');

wenn Sie history.pushState();.__ verwenden, 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 url definiert ist.

Hoffentlich hilft das..

10
Francesco

Sie sollten eine verborgene Eingabe als Aktualisierungsindikator mit dem Wert "no" verwenden:

<input type="hidden" id="refresh" value="no">

Jetzt können Sie mit jQuery 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 Verlassen der Seite.

Wenn Sie die Seite zum ersten Mal laden, lautet der Wert der Eingabe "no". Wenn Sie zu der Seite zurückkehren, wird "Ja" angezeigt, und Ihr JavaScript-Code löst eine Aktualisierung aus.

5
Dhiraj

Schon seit performance.navigation ist jetzt veraltet, Sie können dies versuchen:

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

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

Ich habe die beste Antwort gefunden und sie 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 Schaltflächenklickereignis

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

wenn Sie dies verwenden, aktualisieren Sie Ihre Seite zuerst und wechseln dann zur nächsten Seite. Wenn Sie zurückkehren, wird der letzte aktualisierte Status angezeigt.

Ich habe es in einem CAS-Login verwendet und gibt mir, was ich will . Ich hoffe es hilft .......

details von hier

0
muhammed aslam

Nachladen ist einfach. Du solltest benutzen:

location.reload(true);

Und das Zurückfinden ist: 

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});
0
Anton Stepanenkov