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.
Odpowiedzi:
Aby uzyskać świetny samouczek, wystarczy strona Mozilla Developer Network dotycząca tej funkcji: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Niestety interfejs API historii HTML5 jest zaimplementowany w różny sposób we wszystkich przeglądarkach HTML5 (co powoduje, że jest niespójny i zawiera błędy) i nie ma funkcji zastępczej dla przeglądarek HTML4. Na szczęście History.js zapewnia wzajemną kompatybilność dla przeglądarek HTML5 (zapewniając, że wszystkie przeglądarki HTML5 działają zgodnie z oczekiwaniami) i opcjonalnie zapewnia zastępczą wartość skrótu dla przeglądarek HTML4 (w tym utrzymaną obsługę danych, tytułów, funkcji pushState i replaceState).
Możesz przeczytać więcej o History.js tutaj: https://github.com/browserstate/history.js
Aby zapoznać się z artykułem o Hashbangs VS Hashes VS HTML5 History API, zobacz tutaj: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
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
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):
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>Nginx
rewrite ^(.+)$ /index.html last;
Specyfikacja historii HTML5 jest dziwaczna.
history.pushState()nie wysyła popstatezdarzenia 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ć popstatezdarzenie lub użyć, history.go()aby przejść do nowego stanu. Chodzi o to, że router może słuchać popstatezdarzeń i wykonywać nawigację za Ciebie.
Kilka uwag:
history.pushState()i history.replaceState()nie wysyłaj popstatewydarzeń.history.back(), history.forward()a przyciski wstecz i dalej w przeglądarce wywołują popstatezdarzenia.history.go()i history.go(0)przeładuj całą stronę i nie wysyłaj popstatezdarzeń.history.go(-1)(wstecz 1 strona) i history.go(1)(dalej 1 strona) wysyłają popstatezdarzenia.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 popstatezdarzeń za pomocą routera.
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ń.
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:
Możesz rzucić okiem na tę wtyczkę jQuery. Mają wiele przykładów na swojej stronie. http://www.asual.com/jquery/address/
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:
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();Oto małe skrzypce , które wymyśliłem, aby zademonstrować jego użycie.
jeśli jQuery jest dostępne, możesz użyć jQuery BBQ