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

Question

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

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

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

http://html5demos.com/history

Answer 1

Для большого учебника сетевого разработчика страницы Mozilla на этой функции все, что вам нужно: 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 хэши VS История HTML5 API, смотрите здесь: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

Вот большой экран литой на тему Райан Бейтс из Railscasts. В конце концов, он просто отключает функцию Ajax, если метод history.pushState не доступен:

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

Answer 7

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

Apache (в вашем случае виртуальный хост вы используете один):

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

Answer 8

Я написал очень простую абстракцию маршрутизатора поверх истории.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 я придумана для того, чтобы продемонстрировать его использование.

Answer 9

HTML5 history spec является изворотливым.

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 событий с маршрутизатором.