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

93

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ś!”
John Doeherskij
źródło
Zamiast hakować normalne zachowanie użytkownika, dlaczego nie spróbujesz zrozumieć, dlaczego Twój kod nie działa podczas ładowania strony i chcesz, aby strona została ponownie załadowana?
Lelio Faieta
2
@LelioFaieta Zmieniam klasy, aby pokazać zmiany. Jeśli użytkownik kliknie coś, wartość zmieni się w bazie danych za pośrednictwem ajax. Po zakończeniu AJAX klasa css cahnge na przykład od ondo off. 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)
John Doeherskij
1
Czy używasz funkcji get lub post do połączenia Ajax?
Lelio Faieta
1
@LelioFaieta part2 .. Używam również atrybutu data i nie ma to żadnego efektu. Wszystko byłoby świetnie, gdyby strona została ponownie załadowana. Jeśli naciśnę F5 na tej stronie, zostaną wyświetlone wartości, które zmienił za pośrednictwem ajax. Myślę, że jest to problem związany z chachowaniem przeglądarki, gdy część css / html nie jest w pełni ponownie ładowana. Ładuje się dopiero po naciśnięciu f5
John Doeherskij
@LelioFaieta $.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.
John Doeherskij

Odpowiedzi:

96

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ź:

Leonid Vasilev
źródło
Czy możesz pomóc użytkownikowi Dhiraj, jest na dobrej drodze, ale dwa razy ładuje się ponownie. Nawiasem mówiąc, próbowałem, window.addEventListener( "unload", function() {} );ale nic nie robi, przycisk Wstecz działa jak poprzednio, bez żadnej zmiany; (
John Doeherskij
Jak wyładować BFCache? Czy możesz zaktualizować swój kod, podając bardziej szczegółowe informacje? Ta linia window.addEventListener( "unload", function() {} );nie działa. Czy to jest kompletne?
John Doeherskij
Przeglądanie historii Chrome jest nieco zagmatwane. Spróbuj pageshowrozwiązania.
Leonid Vasilev,
1
Nadal widzę podwójne ładowanie; (Gdy domyślny Firefox (pokazuje starą stronę; może z pamięci podręcznej przeglądarki?), A następnie skrypt uruchamia się ponownie. Skrypt przeładuje go do rzeczywistego etapu, ale nadal widzę stary stan przez sekundę; (mam kod w środku$(document).ready( function() { /* code here */ });
John Doeherskij
3
window.performance.navigationjest przestarzałe. Aby sprawdzić typ nawigacji, którego użyłemwindow.performance.getEntriesByType("navigation")[0].type === "back_forward"
zero01alpha
53

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

Lotok
źródło
2
Ten czek zadziałał dla mnie. Co dokładnie oznacza 2?
RitchieD
To zadziałało jak urok… Umieściłem go w górnej części obszaru… i strona ładowała się ponownie bez ładowania żadnego innego skryptu.
NMathur
To zadziałało jak urok. Świetne znalezisko ... Jest bardzo szybkie i niezawodne, w przeciwieństwie do innych odpowiedzi, które były wolne w porównaniu z tym. TY
Jithin Raj PR,
ten działał z przeglądarką Chrome i nie działał z firefox
praaveen VR
8
To jest przestarzałe (zobacz w3c.github.io/navigation-timing/#obsolete ).
David Vielhuber
23

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

Francesco
źródło
@RitchieD - Od dzisiaj działa to dobrze w IE11 w systemie Windows 10. Uwaga: nie używam EDGE.
Dan G
Po prostu nie jestem fanem odpowiedzi „po prostu użyj jQuery”, przepraszam
Steven,
Usunąłbym wartość „true” z ponownego ładowania, aby korzystać z pamięci podręcznej HTTP. W większości przypadków nie ma sensu przeładowywać zasobów.
konyak
19

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);
}
lutnik
źródło
To jest najbardziej aktualna odpowiedź
Java_Man
Ten kod należy połączyć z kodem w odpowiedzi Leonida powyżej.
gornvix
To działa dobrze dla mnie. Testowałem w najnowszej przeglądarce Chrome, Firefox, IE i Edge. Nie sprawdziłem w Safari na Macu.
Tasawar Hussain
To działa jak urok
Cyrus Zei
7

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.

Dhiraj
źródło
1
To nie działa. Próbowałem Firefoxa i Chrome'a ​​i to nie działa.
John Doeherskij
Proszę, sprawdź moje zaktualizowane pytanie, być może Ty i inni mnie nie zrozumieliście. Teraz jest znacznie jaśniej, co chcę osiągnąć. Dziękuję Ci.
John Doeherskij
Tak, źle zrozumiałem, dziękuję za szczegółową aktualizację pytania.
Dhiraj
teraz działa. Jednak ładuje się 2 razy i wygląda trochę dziwnie. Po raz pierwszy ładuje się ponownie. nic - jest to prawdopodobnie domyślne zachowanie przeglądarki. Za drugim razem, gdy ładuje się ponownie - za pośrednictwem twojego skryptu - wartości są odświeżane tak, jak powinny, ale wygląda to źle, ponieważ ładuje się ponownie dwa razy. Masz pomysł, jak to trochę ulepszyć, żeby przeładowanie wyglądało lepiej lub przeładowywało się tylko raz? Wygląda lepiej w Chrome niż w Firefoksie, przeładowanie jest szybsze, ale nadal widzę pierwotny stan z powrotem (na sekundę lub pół sekundy) i dopiero po tym następuje ponowne załadowanie skryptu.
John Doeherskij
Masz jakiś nowy pomysł, jak naprawić „podwójne obciążenie”?
John Doeherskij
6

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");
Marlon
źródło
Najlepsze rozwiązanie, ale oto wersja, z której korzystałem. Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetMaxAge(TimeSpan.Zero); Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); Response.Cache.SetNoStore();
gorliwość
3

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

Java_Man
źródło
1

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);
});
Anton Stepanenkov
źródło
Nie działa; (Próbowałem 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.
John Doeherskij
Zmieniłem odpowiedź, wypróbuj nowe rozwiązanie. Chodzi o to, że musisz wcześniej push stan, w przeciwnym razie nie otrzymasz zdarzenia popstate.
Anton Stepanenkov
Prawdopodobnie źle zrozumiałeś, czego chcę. Zaktualizowałem moje pytanie o bardziej szczegółowy opis. Proszę, sprawdź to ponownie, jeśli masz czas, dziękuję.
John Doeherskij
0

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

<meta http-equiv="Pragma" content="no-cache">
Rajesh Kharatmol
źródło
Nie powoduje to ponownego załadowania strony po powrocie, o co poprosił OP
Timberman
-1

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

muhammed aslam
źródło
To nie działa dla mnie. Co oznacza „0”?
Vincent,