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:
- użytkownik odwiedza stronę 1.
- będąc na stronie 1 - klika link do strony 2.
- zostaje przekierowany na stronę page2
- teraz (ważna część!) klika przycisk Wstecz w przeglądarce, ponieważ chce wrócić do strony 1
- wrócił na stronę 1 - a teraz strona 1 jest ponownie ładowana i pojawia się alert w stylu „Wróciłeś!”
javascript
jquery
browser
browser-cache
page-refresh
John Doeherskij
źródło
źródło
on
dooff
. I jest w porządku, jest zapisany w db, użytkownicy widzą wszystko poprawnie. Teraz klika inny link. Na przykład strona o nas, prawda? Teraz jest na stronie o nas. Be decyduje się wrócić do poprzedniej strony i klika przycisk Wstecz w przeglądarce. A kiedy wraca, widzi zmiany na stronie, ponieważ przeglądarka pokazywała stronę (prawdopodobnie niektóre błędy przeglądarki), zanim uruchomił ajax (zajęcia on / off)$.ajax({ url: url, method: 'post', processData: false, contentType: false, cache: false, dataType: 'json', data: formData, })
Czy myślisz, że może to być spowodowane przez Ajax? byłoby wspaniale, gdyby tak było.Odpowiedzi:
Możesz użyć
pageshow
zdarzenia 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ź:
źródło
window.addEventListener( "unload", function() {} );
ale nic nie robi, przycisk Wstecz działa jak poprzednio, bez żadnej zmiany; (window.addEventListener( "unload", function() {} );
nie działa. Czy to jest kompletne?pageshow
rozwiązania.$(document).ready( function() { /* code here */ });
window.performance.navigation
jest przestarzałe. Aby sprawdzić typ nawigacji, którego użyłemwindow.performance.getEntriesByType("navigation")[0].type === "back_forward"
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
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
2
wskazuje, ż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óbSą 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
źródło
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 ...
źródło
Ponieważ
performance.navigation
jest teraz przestarzały, możesz spróbować tego:var perfEntries = performance.getEntriesByType("navigation"); if (perfEntries[0].type === "back_forward") { location.reload(true); }
źródło
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.
źródło
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");
źródło
Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetMaxAge(TimeSpan.Zero); Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); Response.Cache.SetNoStore();
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
źródło
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); });
źródło
alert('test');
zamiast,location.reload(true);
ale nadal nic. Próbowałem Firefox i Chrome, ale nic. Próbowałem wewnątrz dokumentu gotowego, na zewnątrz, ale nic nie działa. Jeśli spróbuję prostego alertu () lub dowolnego kodu jquery, który działa. mieć dużo kodu jQuery na mojej stronie i to działa.Użyj następującego metatagu w swoim pliku nagłówkowym HTML, To działa dla mnie.
<meta http-equiv="Pragma" content="no-cache">
źródło
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 .......
źródło