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

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

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

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

http://html5demos.com/history

ОТВЕТЫ

Ответ 1

Для большого учебного пособия доступна страница 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 History API см. здесь: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Ответ 3

Имейте в виду, что при использовании pushstate HTML5, если пользователь копирует или закладывает глубокую ссылку и снова посещает ее, тогда это будет прямой хит сервера, который будет 404, поэтому вам нужно быть готовым к этому, и даже выиграть славу библиотеки jststate Не помогите. Самое простое решение - добавить правило перезаписи на ваш сервер 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;

Ответ 4

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

Ответ 5

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

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

Ответ 6

история 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 истории, подобный этому, чтобы нажать новое состояние и отправить всплывающее событие.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Затем слушайте события popstate с маршрутизатором.

Ответ 7

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

Ответ 8

Я написал очень простую абстракцию маршрутизатора поверх 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();

Вот немного fiddle Я придумал, чтобы продемонстрировать его использование.

Ответ 9

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