Я пытаюсь использовать API истории HTML5 для решения проблем с глубокими ссылками с загруженным контентом AJAX, но я изо всех сил пытаюсь уйти с земли. Кто-нибудь знает какие-нибудь хорошие ресурсы?
Я хочу использовать это, так как кажется, что это отличный способ разрешить тем, кто отправляет ссылки, возможно, не включить JS. Многие решения терпят неудачу, когда кто-то с JS отправляет ссылку на кого-то без.
Мои первоначальные исследования, похоже, указывают на History API в JS и метод pushState.
источник
Я получил много пользы от «Погружения в HTML 5». Объяснение и демонстрация проще и точнее. Глава по истории - http://diveintohtml5.info/history.html и демонстрационная история - http://diveintohtml5.info/examples/history/fer.html
источник
Имейте в виду, что при использовании pushstate HTML5 пользователь копирует или добавляет закладку в глубокую ссылку и снова посещает ее, тогда это будет прямым попаданием на сервер, которое будет 404, поэтому вам нужно быть готовым к нему, и даже библиотека pushstate js не поможет ты. Самое простое решение - добавить правило перезаписи на сервер Nginx или Apache следующим образом:
Apache (в вашем vhost, если вы его используете):
Nginx
источник
Спецификация истории HTML5 является странной.
history.pushState()
не отправляетpopstate
событие и не загружает новую страницу самостоятельно. Это должно было только подтолкнуть государство в историю. Это функция отмены для одностраничных приложений. Вы должны вручную отправитьpopstate
событие или использоватьhistory.go()
для перехода в новое состояние. Идея заключается в том, что маршрутизатор может прослушиватьpopstate
события и выполнять навигацию за вас.Некоторые вещи, на которые стоит обратить внимание:
history.pushState()
иhistory.replaceState()
не отправлятьpopstate
события.history.back()
,history.forward()
и кнопки браузера «назад» и «вперед» отправляютpopstate
события.history.go()
иhistory.go(0)
сделать полную перезагрузку страницы и не отправлятьpopstate
события.history.go(-1)
(1 страница назад) иhistory.go(1)
(1 страница вперед)popstate
события отправки .Вы можете использовать API истории, как этот, чтобы выдвинуть новое состояние И отправить событие popstate.
history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));
Тогда слушайте
popstate
события с роутером.источник
new PopStateEvent(...)
кажется, не работает в IE11? Есть ли обходной путь, о котором кто-нибудь знает?var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
Вы можете попробовать Davis.js , он дает вам маршрутизацию в вашем JavaScript, используя pushState, когда он доступен, и без JavaScript, он позволяет коду на стороне сервера обрабатывать запросы.
источник
Вот отличный скриншот на тему Райана Бейтса, посвященного железнодорожным вещам. В конце он просто отключает функциональность ajax, если метод history.pushState недоступен:
http://railscasts.com/episodes/246-ajax-history-state
источник
Возможно, вы захотите взглянуть на этот плагин jQuery. У них есть много примеров на своем сайте. http://www.asual.com/jquery/address/
источник
Я написал очень простую абстракцию маршрутизатора поверх History.js, которая называется StateRouter.js . Он находится на очень ранних стадиях разработки, но я использую его в качестве решения для маршрутизации в одностраничном приложении, которое я пишу. Как и вы, я обнаружил, что History.js очень трудно понять, тем более что я довольно плохо знаком с JavaScript, пока не понял, что вам действительно нужна (или должна иметь) абстракция маршрутизации поверх нее, поскольку она решает низкоуровневый проблема.
Этот простой пример кода должен продемонстрировать, как он используется:
Вот небольшая скрипка, которую я придумал, чтобы продемонстрировать ее использование.
источник
если jQuery доступен, вы можете использовать jQuery BBQ
источник