Хороший учебник по использованию HTML5 History API (Pushstate?)

Я пытаюсь использовать API истории HTML5 для решения проблем с глубокими ссылками с загруженным AJAX-контентом, но я изо всех сил пытаюсь уйти с земли. Кто-нибудь знает какие-либо хорошие ресурсы?

Я хочу использовать это, так как кажется, что это отличный способ разрешить тем, кто отправляет ссылки, возможно, не включить JS. Многие решения терпят неудачу, когда кто-то с JS отправляет ссылку на кого-то без.

Мои первоначальные исследования, похоже, указывают на History API в JS и метод pushState.

http://html5demos.com/history

9 ответов

Решение

Для отличного учебника на странице Mozilla Developer Network, посвященной этой функциональности, есть все, что вам нужно: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

К сожалению, API истории HTML5 реализован по-разному во всех браузерах HTML5 (что делает его непоследовательным и ошибочным) и не имеет альтернативы для браузеров HTML4. К счастью, History.js обеспечивает кросс-совместимость для браузеров HTML5 (гарантируя, что все браузеры HTML5 работают должным образом) и, при желании, обеспечивает откат хэша для браузеров HTML4 (включая поддерживаемую поддержку данных, заголовков, функциональных возможностей pushState и replaceState).

Вы можете прочитать больше о History.js здесь: https://github.com/browserstate/history.js

Для статьи о Hashbangs VS Hashes VS API истории HTML5, смотрите здесь: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Я получил много пользы от "Погружения в HTML 5". Объяснение и демонстрация проще и точнее. Глава по истории - http://diveintohtml5.info/history.html и демонстрационная история - http://diveintohtml5.info/examples/history/fer.html

Имейте в виду, что при использовании pushstate HTML5 пользователь копирует или добавляет в закладки глубокую ссылку и снова посещает ее, тогда это будет прямым попаданием на сервер, которое будет 404, поэтому вам нужно быть готовым к этому, и даже библиотека pushstate js не поможет вы. Самое простое решение - добавить правило перезаписи на сервер Nginx или Apache следующим образом:

Apache (в вашем vhost, если вы его используете):

<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;

Спецификация истории 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 события с роутером.

Вы можете попробовать Davis.js, он дает вам маршрутизацию в вашем JavaScript, используя pushState, когда он доступен, и без JavaScript, он позволяет вашему серверному коду обрабатывать запросы.

Вот отличный скриншот на тему Райана Бейтса, посвященного железнодорожным вещам. В конце он просто отключает функциональность ajax, если метод history.pushState недоступен:

http://railscasts.com/episodes/246-ajax-history-state

Я написал очень простую абстракцию маршрутизатора поверх History.js, которая называется StateRouter.js. Он находится на очень ранней стадии разработки, но я использую его в качестве решения для маршрутизации в одностраничном приложении, которое я пишу. Как и вы, я обнаружил, что History.js очень трудно понять, тем более что я довольно плохо знаком с JavaScript, пока не понял, что вам действительно нужна (или должна иметь) абстракция маршрутизации поверх нее, поскольку она решает низкоуровневый уровень. проблема.

Этот простой пример кода должен продемонстрировать, как он используется:

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();

Вот небольшая скрипка, которую я придумал, чтобы продемонстрировать ее использование.

Возможно, вы захотите взглянуть на этот плагин jQuery. У них есть много примеров на своем сайте. http://www.asual.com/jquery/address/

Если jQuery доступен, вы можете использовать jQuery BBQ

Другие вопросы по тегам