Поиграемся с HTML5 history API


Никакой военной тайны в статье не открою, но открою глаза для тех, кто не работал с history API. Чтобы понять нужно вам или нет, просто кликните сюда и понаблюдайте за адресной стройкой браузера. Если эта возможность не удивила – можете дальше не читать статью. (Прошу обратить внимание: мы меняем содержание адресной строки без перезагрузки страницы, это важно)

Ну а для тех, кто дошел до этого места, попробуем разобрать магию: мы работаем с объектом window.history с помощью javascript. Почитать подробно можно тут. Разбирать очевидные методы типа: go(), back(), forward() мы не будем. Остановимся более подробно на pushState(data, title, url), где

  • data – это данные передаваемые странице(можно пустой объект)
  • title – название конкретного состояния(тоже можно оставить пустым)
  • url – то что мы хотим записать сразу после домена

Вот пример с конкретными данными:

history.pushState({}, '', '/someurl/that/you/want/to/see/in/location')

Как видите  – ничего сложного.

Где это необходимо использовать? В сервисах, где большая часть логики на стороне клиента, а обращения к серверу идут аяксом: при этом хотелось держать в браузере валидную историю переходов.

На всякий случай проверяем табличку совместимости с вашими поддерживаемыми браузерами.

Вот полный код того, что происходило вначале: http://learn.javascript.ru/play/S60sJ (в песочнице работать не будет, так как она открывается во фрейме)