Używam Ajax i skrótu do nawigacji.
Czy istnieje sposób, aby sprawdzić, czy tak się window.location.hash
zmieniło?
http://example.com/blah # 123 do http://example.com/blah # 456
Działa, jeśli sprawdzę to podczas ładowania dokumentu.
Ale jeśli mam nawigację opartą na #hash, to nie działa po naciśnięciu przycisku Wstecz w przeglądarce (więc skaczę z bla # 456 do bla # 123).
Pokazuje się w polu adresu, ale nie mogę go złapać za pomocą JavaScript.
Odpowiedzi:
Jedynym sposobem, aby to naprawdę zrobić (i to, w jaki sposób robi to „reallysimplehistory”), jest ustawienie interwału, który sprawdza bieżący skrót i porównanie go z tym, co było wcześniej, robimy to i pozwalamy subskrybentom subskrybować zmienione zdarzenie, które uruchamiamy, jeśli skrót się zmieni ... nie jest idealny, ale przeglądarki naprawdę nie obsługują tego zdarzenia natywnie.
Zaktualizuj, aby zachować aktualność tej odpowiedzi:
Jeśli używasz jQuery (która dziś powinna być w pewnym stopniu fundamentalna), dobrym rozwiązaniem jest użycie abstrakcji, którą daje ci jQuery, używając systemu zdarzeń do nasłuchiwania zdarzeń hashchange na obiekcie okna.
Fajną rzeczą jest to, że możesz pisać kod, który nie musi się nawet martwić o obsługę hashchange, jednak musisz zrobić trochę magii, w postaci nieco mniej znanej specjalnej funkcji jQuery jQuery .
Dzięki tej funkcji zasadniczo można uruchomić kod instalacyjny dla dowolnego zdarzenia, za pierwszym razem, gdy ktoś próbuje użyć zdarzenia w jakikolwiek sposób (np. Powiązanie ze zdarzeniem).
W tym kodzie instalacyjnym możesz sprawdzić, czy natywna obsługa przeglądarki jest obsługiwana, a jeśli przeglądarka natywnie tego nie implementuje, możesz skonfigurować pojedynczy licznik czasu, aby sondować zmiany i wyzwalać zdarzenie jQuery.
To całkowicie odsuwa twój kod od konieczności zrozumienia tego problemu wsparcia, implementacja tego rodzaju specjalnego zdarzenia jest trywialna (aby uzyskać prostą 98% działającą wersję), ale po co to robić, skoro ktoś już to zrobił .
źródło
hashchange
zdarzenie, podczas gdy Safari (stabilny) jeszcze nie.hashchange
wydarzenie jest teraz szeroko obsługiwane: caniuse.com/#search=hashHTML5 określa
hashchange
zdarzenie . To wydarzenie jest teraz obsługiwane przez wszystkie nowoczesne przeglądarki . Obsługa została dodana w następujących wersjach przeglądarki:źródło
window.onhashchange = function() { doYourStuff(); }
Zauważ, że w przypadku Internet Explorera 7 i Internet Explorera 9
if
podana będzie prawda (dla „onhashchange” w systemie Windows), alewindow.onhashchange
nigdy się nie uruchomi, więc lepiej przechowywać hash i sprawdzać go po każdych 100 milisekundach, czy jest zmieniony czy nie dla wszystkich wersji Internet Explorera.EDYCJA - od wersji jQuery 1.9
$.browser.msie
nie jest obsługiwana. Źródło: http://api.jquery.com/jquery.browser/źródło
W przeglądarkach IE jest wiele sztuczek związanych z History i window.location.hash:
Zgodnie z pierwotnym pytaniem, jeśli przejdziesz ze strony a.html # b do a.html # c, a następnie naciśniesz przycisk Wstecz, przeglądarka nie wie, że ta strona się zmieniła. Powiem to na przykładzie: window.location.href będzie „a.html # c”, bez względu na to, czy jesteś w a.html # b czy a.html # c.
W rzeczywistości a.html # bi a.html # c są przechowywane w historii tylko wtedy, gdy elementy „<a name="#b">” i „<a name="#c">” istniały wcześniej na stronie.
Jeśli jednak umieścisz ramkę iframe na stronie, przejdź od a.html # b do a.html # c w tej ramce iframe, a następnie naciśnij przycisk Wstecz, iframe.contentWindow.document.location.href zmienia się zgodnie z oczekiwaniami.
Jeśli użyjesz „document.domain = coś ” w kodzie, nie będziesz mieć dostępu do iframe.contentWindow.document.open () ”(i robi to wielu menedżerów historii)
Wiem, że to nie jest prawdziwa odpowiedź, ale może notatki historii IE są dla kogoś przydatne.
źródło
Firefox ma zdarzenie onhashchange od wersji 3.6. Zobacz window.onhashchange .
źródło
Ben Alman ma świetną wtyczkę jQuery do radzenia sobie z tym: http://benalman.com/projects/jquery-hashchange-plugin/
Jeśli nie używasz jQuery, może to być interesujące odniesienie do analizy.
źródło
Możesz łatwo wdrożyć obserwatora (metodę „watch”) we właściwości „hash” obiektu „window.location”.
Firefox ma własną implementację do obserwowania zmian obiektu , ale jeśli używasz innej implementacji (takiej jak Obserwuj właściwości obiektu w JavaScript ) - w przypadku innych przeglądarek to załatwi sprawę.
Kod będzie wyglądał następująco:
Następnie możesz to przetestować:
I oczywiście uruchomi to funkcję obserwatora.
źródło
watch
obiekt, który jest właścicielem zmieniającej się właściwości i chcesz ją obserwować.Używałem tego w aplikacji reagującej, aby URL wyświetlał różne parametry w zależności od widoku, na którym był użytkownik.
Oglądałem parametr skrótu za pomocą
Następnie
Działał smakołyk, działa z przyciskami przeglądarki do przodu i do tyłu, a także w historii przeglądarki.
źródło
addEventListener
połączeniu powinieneś usunąć()
zdoSomethingWithChangeFunction
()
.addEventListener
Funkcja wymaga, aby przejść w funkcji.doSomethingWithChangeFunction
jest funkcją.doSomethingWithChangeFunction()
jest wartością zwracaną przez tę funkcję, która w tym przypadku nie jest funkcją.Przyzwoite wdrożenie można znaleźć na stronie http://code.google.com/p/reallysimplehistory/ . Jedynym (ale także) problemem i błędem jest: w Internet Explorerze modyfikacja skrótu lokalizacji ręcznie zresetuje cały stos historii (jest to problem przeglądarki i nie można go rozwiązać).
Uwaga: Internet Explorer 8 obsługuje zdarzenie „hashchange”, a ponieważ staje się częścią HTML5, możesz spodziewać się, że inne przeglądarki nadrobią zaległości.
źródło
Inną świetną implementacją jest jQuery History, która wykorzysta natywne zdarzenie onhashchange, jeśli jest obsługiwane przez przeglądarkę, jeśli nie, użyje odpowiednio elementu iframe lub interwału dla przeglądarki, aby zapewnić pomyślną emulację wszystkich oczekiwanych funkcji. Zapewnia również przyjemny interfejs do łączenia się z niektórymi stanami.
Kolejnym projektem wartym odnotowania jest także jQuery Ajaxy, który jest prawie rozszerzeniem historii jQuery, aby dodać ajax do miksu. Kiedy zaczynasz używać ajax z hashami, staje się to dość skomplikowane !
źródło
To wszystko ... teraz, za każdym razem, gdy naciśniesz przycisk Wstecz lub Dalej, strona zostanie ponownie załadowana zgodnie z nową wartością skrótu.
źródło
Używam path.js do routingu po stronie klienta. Uważam, że jest dość zwięzły i lekki (został również opublikowany w NPM) i korzysta z nawigacji opartej na haszowaniu.
path.js NPM
path.js GitHub
źródło
Użyłem wtyczki jQuery, HUtil , i napisałem na niej interfejs podobny do historii YUI .
Sprawdź to raz. Jeśli potrzebujesz pomocy, mogę pomóc.
źródło