Zastanawiam się nad wykorzystaniem interfejsu API historii HTML5, aby rozwiązać problemy z linkowaniem głębokim w treściach ładowanych w formacie AJAX, ale nie mogę się doczekać rozpoczęcia pracy. Czy ktoś zna jakieś dobre zasoby?
Chcę to wykorzystać, ponieważ wydaje się to świetny sposób, aby pozwolić, aby wysyłane linki nie miały włączonego JS. Wiele rozwiązań zawodzi, gdy ktoś z JS wysyła link do kogoś bez.
Moje wstępne badania wydają się wskazywać na History API w JS i metodę pushState.
źródło
Bardzo skorzystałem na „Zanurz się w HTML 5”. Wyjaśnienie i demo są łatwiejsze i na temat. Rozdział Historia - http://diveintohtml5.info/history.html i demo historii - http://diveintohtml5.info/examples/history/fer.html
źródło
Pamiętaj, że podczas korzystania z pushstate HTML5, jeśli użytkownik skopiuje lub doda do zakładek głęboki link i odwiedzi go ponownie, będzie to bezpośrednie trafienie na serwer, które 404 spowoduje, że musisz być na to przygotowany, a nawet biblioteka pushstate js nie pomoże ty. Najłatwiejszym rozwiązaniem jest dodanie reguły przepisywania do serwera Nginx lub Apache w następujący sposób:
Apache (w twoim vhostie, jeśli go używasz):
Nginx
źródło
Specyfikacja historii HTML5 jest dziwaczna.
history.pushState()
nie wysyłapopstate
zdarzenia ani nie wczytuje samodzielnie nowej strony. Miało to tylko wprowadzić państwo do historii. Jest to funkcja „cofnij” dla aplikacji jednostronicowych. Musisz ręcznie wywołaćpopstate
zdarzenie lub użyć,history.go()
aby przejść do nowego stanu. Chodzi o to, że router może słuchaćpopstate
zdarzeń i wykonywać nawigację za Ciebie.Kilka uwag:
history.pushState()
ihistory.replaceState()
nie wysyłajpopstate
wydarzeń.history.back()
,history.forward()
a przyciski wstecz i dalej w przeglądarce wywołująpopstate
zdarzenia.history.go()
ihistory.go(0)
przeładuj całą stronę i nie wysyłajpopstate
zdarzeń.history.go(-1)
(wstecz 1 strona) ihistory.go(1)
(dalej 1 strona) wysyłająpopstate
zdarzenia.Możesz użyć interfejsu API historii w ten sposób, aby wypchnąć nowy stan ORAZ wywołać zdarzenie popstate.
history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));
Następnie nasłuchuj
popstate
zdarzeń za pomocą routera.źródło
new PopStateEvent(...)
wydaje się, że nie działa w IE11? Czy istnieje obejście, o którym ktoś wie?var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
Możesz wypróbować Davis.js , który zapewnia routing w JavaScript za pomocą pushState, gdy jest dostępny, a bez JavaScript pozwala kodowi po stronie serwera na obsługę żądań.
źródło
Oto świetny zrzut ekranu na ten temat autorstwa Ryana Batesa z railscasts. Na koniec po prostu wyłącza funkcjonalność Ajax, jeśli metoda history.pushState nie jest dostępna:
http://railscasts.com/episodes/246-ajax-history-state
źródło
Możesz rzucić okiem na tę wtyczkę jQuery. Mają wiele przykładów na swojej stronie. http://www.asual.com/jquery/address/
źródło
Napisałem bardzo prostą abstrakcję routera na podstawie History.js , nazwaną StateRouter.js . Jest na bardzo wczesnym etapie rozwoju, ale używam go jako rozwiązania routingu w aplikacji jednostronicowej, którą piszę. Tak jak ty, bardzo trudno mi było pojąć History.js, zwłaszcza że jestem całkiem nowy w JavaScript, dopóki nie zrozumiałem, że naprawdę potrzebujesz (lub powinieneś mieć) abstrakcję routingu, ponieważ rozwiązuje ona problem niskiego poziomu problem.
Ten prosty przykładowy kod powinien pokazać, jak jest używany:
Oto małe skrzypce , które wymyśliłem, aby zademonstrować jego użycie.
źródło
jeśli jQuery jest dostępne, możesz użyć jQuery BBQ
źródło