Jak ostatecznie wykryć, czy użytkownik nacisnął przycisk Wstecz w przeglądarce?
Jak wymusić użycie przycisku cofania na stronie w aplikacji internetowej na jednej stronie za pomocą #URL
systemu?
Dlaczego, u licha, przyciski powrotu przeglądarki nie uruchamiają własnych wydarzeń !?
Odpowiedzi:
(Uwaga: zgodnie z opinią Sharky, dołączyłem kod do wykrywania backspace)
Tak więc często widziałem te pytania na SO, a ostatnio sam miałem problem z kontrolowaniem funkcji przycisku Wstecz. Po kilku dniach poszukiwania najlepszego rozwiązania dla mojej aplikacji (jednostronicowa z nawigacją mieszającą), opracowałem prosty, bezobsługowy system wykrywania w przeglądarce dla różnych przeglądarek.
Większość osób zaleca używanie:
Jednak ta funkcja będzie również wywoływana, gdy użytkownik użyje elementu na stronie, który zmienia skrót lokalizacji. Nie jest to najlepsze doświadczenie użytkownika, gdy użytkownik klika, a strona przewija się do tyłu lub do przodu.
Aby dać ogólny zarys mojego systemu, wypełniam tablicę poprzednimi hashami, gdy mój użytkownik porusza się po interfejsie. Wygląda to mniej więcej tak:
Całkiem prosto. Robię to, aby zapewnić obsługę wielu przeglądarek, a także obsługę starszych przeglądarek. Po prostu przekaż nowy skrót do funkcji, a on zapisze go dla ciebie, a następnie zmieni skrót (który jest następnie zapisywany w historii przeglądarki).
Korzystam również z przycisku Wstecz na stronie, który przenosi użytkownika między stronami za pomocą
lasthash
tablicy. To wygląda tak:Spowoduje to przeniesienie użytkownika z powrotem do ostatniego skrótu i usunięcie tego ostatniego skrótu z tablicy (w tej chwili nie mam przycisku przewijania).
Więc. Jak wykryć, czy użytkownik użył przycisku Wstecz na stronie lub przycisku przeglądarki?
Na początku patrzyłem
window.onbeforeunload
, ale bezskutecznie - jest to wywoływane tylko wtedy, gdy użytkownik zamierza zmienić strony. Nie dzieje się tak w przypadku aplikacji jednostronicowej korzystającej z funkcji skrótu.Po dłuższym kopaniu zobaczyłem zalecenia dotyczące próby ustawienia zmiennej flagowej. Problem w tym przypadku polega na tym, że spróbuję to ustawić, ale ponieważ wszystko jest asynchroniczne, nie zawsze będzie ono ustawione na czas na zmianę instrukcji if w haszowaniu.
.onMouseDown
nie zawsze było wywoływane kliknięciem, a dodanie go do kliknięcia nigdy nie uruchomiłoby go wystarczająco szybko.To wtedy zacząłem patrzeć na różnicę między
document
, awindow
. Moim ostatecznym rozwiązaniem było ustawienie flagi za pomocądocument.onmouseover
i wyłączenie jej za pomocądocument.onmouseleave
.Co się dzieje, gdy mysz użytkownika znajduje się w obszarze dokumentu (czytaj: renderowana strona, ale z wyłączeniem ramki przeglądarki), moja wartość logiczna jest ustawiona na
true
. Gdy tylko mysz opuści obszar dokumentu, wartość logiczna zmienia się nafalse
.W ten sposób mogę zmienić moje
window.onhashchange
na:Zauważysz czek na
#undefined
. Wynika to z faktu, że jeśli w mojej tablicy nie ma dostępnej historii, funkcja zwraca wartośćundefined
. Używam tego, aby zapytać użytkownika, czy chce odejść za pomocąwindow.onbeforeunload
zdarzenia.Krótko mówiąc, dla osób, które niekoniecznie używają przycisku Wstecz na stronie lub tablicy do przechowywania historii:
I masz to. prosty, trzyczęściowy sposób wykrywania użycia przycisku Wstecz w porównaniu z elementami na stronie w odniesieniu do nawigacji hash.
EDYTOWAĆ:
Aby mieć pewność, że użytkownik nie użyje backspace, aby wywołać zdarzenie back, możesz również dołączyć następujące (Dzięki @thetoolman na to pytanie ):
źródło
Możesz wypróbować
popstate
moduł obsługi zdarzeń, np .:Uwaga: Aby uzyskać najlepsze wyniki, należy ładować ten kod tylko na określonych stronach, na których chcesz zaimplementować logikę, aby uniknąć innych nieoczekiwanych problemów.
Zdarzenie popstate jest uruchamiane za każdym razem, gdy zmienia się bieżący wpis historii (użytkownik przechodzi do nowego stanu). Że dzieje się, gdy użytkownik kliknie na przyciski Wstecz / Forward przeglądarce lub kiedy
history.back()
,history.forward()
,history.go()
metody są programowo nazywa.Właściwość
event.state
is zdarzenia jest równa obiektowi stanu historii.Aby uzyskać składnię jQuery, zawiń ją (aby dodać nawet słuchacza, gdy dokument będzie gotowy):
Zobacz także: window.onpopstate przy ładowaniu strony
Zobacz także przykłady dotyczące aplikacji jednostronicowych i strony pushState HTML5 :
Powinno to być zgodne z Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ i podobne.
źródło
Od dłuższego czasu zmagałem się z tym wymogiem i wdrożyłem niektóre z powyższych rozwiązań. Natknąłem się jednak na obserwację i wydaje się, że działa ona w przeglądarkach Chrome, Firefox i Safari + Android i iPhone
Ładowanie strony:
Daj mi znać, jeśli to pomoże. Jeśli czegoś brakuje, chętnie to zrozumiem.
źródło
event
ma wartość nawet dla przycisku przewijaniaW javascript typ nawigacji
2
oznacza kliknięcie przycisku Wstecz lub Dalej przeglądarki, a przeglądarka faktycznie pobiera zawartość z pamięci podręcznej.źródło
To na pewno zadziała (do wykrywania kliknięcia przycisku Wstecz)
źródło
Zobacz:
to działa dobrze...
źródło
To jedyne rozwiązanie, które działało dla mnie (nie jest to strona internetowa). Działa z Chrome, Firefox i Safari.
źródło
Prawidłowa odpowiedź jest już dostępna, aby odpowiedzieć na pytanie. Chcę wspomnieć o nowym JavaScript API PerformanceNavigationTiming , który zastępuje przestarzałe performance.navigation .
Poniższy kod zaloguje się do konsoli „back_forward”, jeśli użytkownik wylądował na Twojej stronie za pomocą przycisku Wstecz lub Dalej. Spójrz na tabelę zgodności przed użyciem jej w swoim projekcie.
źródło
Przeglądarka: https://jsfiddle.net/Limitlessisa/axt1Lqoz/
Do sterowania mobilnego: https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/
źródło
Oto moje zdanie na ten temat. Zakłada się, że gdy adres URL zmienia się, ale nie wykryto kliknięcia w
document
wykrytym urządzeniu, jest to przeglądarka wstecz (tak lub dalej). Kliknięcie użytkownika jest resetowane po 2 sekundach, aby działało na stronach, które ładują zawartość przez Ajax:źródło
Byłem w stanie użyć niektórych odpowiedzi w tym wątku i innych, aby uruchomić go w IE i Chrome / Edge. history.pushState dla mnie nie był obsługiwany w IE11.
źródło
Pełnoprawny komponent można wdrożyć tylko wtedy, gdy ponownie zdefiniujesz API (zmienisz metody „historii” obiektu). Podzielę się właśnie zapisaną klasą. Testowane na Chrome i Mozilli Obsługują tylko HTML5 i ECMAScript5-6
źródło
Document.mouseover nie działa dla IE i FireFox. Jednak próbowałem tego:
Działa to w przypadku Chrome i IE, a nie FireFox. Nadal pracuję nad poprawą działania FireFox. Każdy prosty sposób na wykrycie kliknięcia przycisku Wstecz / Dalej przeglądarki jest mile widziany, szczególnie w JQuery, ale także w AngularJS lub zwykłym JavaScript.
źródło
Powyższy kod działał dla mnie. W przeglądarkach mobilnych, gdy użytkownik kliknął przycisk Wstecz, chcieliśmy przywrócić stan strony zgodnie z jego poprzednią wizytą.
źródło
Rozwiązałem go, śledząc oryginalne zdarzenie, które wywołało
hashchange
(machnięcie, kliknięcie lub koło), aby zdarzenie nie mogło zostać pomylone z prostym lądowaniem na stronie, oraz użycie dodatkowej flagi w każde z moich powiązań zdarzeń. Przeglądarka nie ustawia flagi ponowniefalse
po naciśnięciu przycisku Wstecz:źródło
Próbowałem powyższych opcji, ale żadna z nich nie działa dla mnie. Oto rozwiązanie
Patrz link http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli więcej szczegółów
źródło