Jak wymusić ponowne załadowanie strony podczas korzystania z przycisku Wstecz w przeglądarce?

Muszę jakoś wykryć, że użytkownik nacisnął przycisk Wstecz przeglądarki i ponownie załadować stronę z odświeżaniem (przeładowaniem zawartości i CSS) za pomocą jquery.

Jak wykryć takie działanie za pomocą jQuery?

Ponieważ w tej chwili niektóre elementy nie są ponownie ładowane, jeśli używam przycisku Wstecz w przeglądarce. Jeśli jednak korzystam z linków w serwisie, wszystko jest odświeżane i pokazywane poprawnie.

WAŻNY!

Niektórzy ludzie prawdopodobnie źle zrozumieli, czego chcę. Nie chcę odświeżyć bieżącej strony. Chcę odświeżyć stronę, która jest ładowana po naciśnięciu przycisku Wstecz. oto, co mam na myśli w bardziej szczegółowy sposób:

1. użytkownik odwiedza stronę 1.
2. będąc na stronie 1 - klika link do strony 2.
3. zostaje przekierowany na stronę page2
4. teraz (ważna część!) klika przycisk Wstecz w przeglądarce, ponieważ chce wrócić do strony 1
5. wrócił na stronę 1 - a teraz strona 1 jest ponownie ładowana i pojawia się alert w stylu „Wróciłeś!”

Możesz użyć pageshowzdarzenia do obsługi sytuacji, gdy przeglądarka przechodzi na Twoją stronę przez przeglądanie historii:

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

Należy pamiętać, że może być zaangażowana również pamięć podręczna HTTP. Musisz ustawić odpowiednie nagłówki HTTP związane z pamięcią podręczną na serwerze, aby buforować tylko te zasoby, które mają być buforowane. Można również zrobić wymuszonym przeładowaniu do przeglądarki instuct ignorować HTTP cache: window.location.reload( true ). Ale nie uważam, że to najlepsze rozwiązanie.

Aby uzyskać więcej informacji, sprawdź:

• Praca z artykułem BFCache na MDN
• WebKit Page Cache II - zdarzenie rozładowania autorstwa Brady'ego Eidsona
• Odniesienie do zdarzenia w witrynie MDN
• Ajax, przycisk Wstecz i pytanie o aktualizacje DOM
• JavaScript - bfcache / pageshow event - event.persisted zawsze ustawione na false? pytanie

Minęło trochę czasu, odkąd to zostało opublikowane, ale znalazłem bardziej eleganckie rozwiązanie, jeśli nie potrzebujesz obsługi starych przeglądarek.

Możesz sprawdzić z

performance.navigation.type

Dokumentacja, w tym obsługa przeglądarek, jest dostępna tutaj: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Aby sprawdzić, czy strona została załadowana z historii, możesz to zrobić

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

Symbol 2wskazuje, że strona została otwarta po przejściu do historii. Inne możliwości to:

0:Dostęp do strony uzyskano, klikając łącze, zakładkę, przesłany formularz lub skrypt albo wpisując adres URL w pasku adresu.

1:Dostęp do strony uzyskano, klikając przycisk Odśwież lub za pomocą metody Location.reload ().

255: Każdy inny sposób

Są one szczegółowo opisane tutaj: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Uwaga Performance.navigation.type jest teraz przestarzała i zastępuje PerformanceNavigationTiming.type, która zwraca „navigate” / „reload” / „back_forward” / „prerender”: https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / type

Po prostu użyj jquery:

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

Powyższe zadziała w 100% po kliknięciu przycisku Wstecz lub Dalej również przy użyciu Ajax.

jeśli tak nie jest, musi być błędna konfiguracja w innej części skryptu.

Na przykład może nie ładować się ponownie, jeśli zostanie użyty przykład podobny do jednego z przykładów z poprzedniego postu window.history.pushState('', null, './');

więc kiedy używasz, history.pushState(); upewnij się, że używasz go prawidłowo.

Sugestia w większości przypadków wystarczy:

history.pushState(url, '', url); 

Brak window.history ... i upewnij się, że adres URL jest zdefiniowany.

Mam nadzieję, że to pomoże ...

Ponieważ performance.navigationjest teraz przestarzały, możesz spróbować tego:

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

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

Jako wskaźnika odświeżania należy użyć ukrytych danych wejściowych z wartością „nie”:

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

Teraz używając jQuery, możesz sprawdzić jego wartość:

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

Po kliknięciu przycisku Wstecz wartości w ukrytych polach zachowują tę samą wartość, co przy pierwotnym opuszczeniu strony.

Zatem przy pierwszym załadowaniu strony wartość wejściowa będzie wynosić „nie”. Kiedy wrócisz na stronę, będzie to „tak”, a Twój kod JavaScript uruchomi odświeżenie.

Alternatywą, która rozwiązała ten problem, jest wyłączenie pamięci podręcznej strony. To sprawia, że ​​przeglądarka pobiera stronę z serwera zamiast używać wersji z pamięci podręcznej:

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

Obecnie jest to najbardziej aktualny sposób ponownego załadowania strony, jeśli użytkownik kliknie przycisk Wstecz.

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

Patrz tutaj dla źródła

Przeładowanie jest łatwe. Powinieneś użyć:

location.reload(true);

A wykrywanie z powrotem to:

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

Użyj następującego metatagu w swoim pliku nagłówkowym HTML, To działa dla mnie.

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

Znalazłem najlepszą odpowiedź i działa ona idealnie dla mnie

po prostu użyj tego prostego skryptu w swoim linku

<A HREF="javascript:history.go(0)">next page</A>

lub zdarzenie kliknięcia przycisku

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

kiedy z tego korzystasz, najpierw odświeżasz stronę, a potem przechodzisz do następnej strony, a kiedy wrócisz, będzie miała ostatni odświeżony stan.

Użyłem go w logowaniu CAS i daje mi to, czego chcę. Mam nadzieję, że to pomoże .......

szczegóły znalezione stąd