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