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

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

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

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

вот отличный экран-бросок на тему Райана Бейтса из railscasts. В конце он просто отключает функциональность ajax, если история.метод pushState недоступен:

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

The HTML5 history spec изворотливая.

history.pushState() не отправляет a popstate событие или загрузить новую страницу под себя. Это было сделано только для того, чтобы подтолкнуть государство в историю. Это функция "отменить" для одностраничных приложений. Вы должны вручную отправить a popstate или history.go() для перехода в новое состояние. Идея заключается в том, что маршрутизатор может слушать popstate события и сделать навигацию для вас.

некоторые вещи Примечание:

• history.pushState() и history.replaceState() не направить popstate событий.
• history.back(),history.forward(), и кнопки браузера назад и вперед делают dispatch popstate событий.
• history.go() и history.go(0) сделайте полную перезагрузку страницы и не отправляйте popstate событий.
• history.go(-1) (назад 1 страница) и history.go(1) (вперед 1 страница) do dispatch popstate событий.

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

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

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

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

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