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