Веб-заметки и Веб-подсказки

HTML5 предусматривает возможность динамической подмены адреса страниц без их перезагрузки с помощью JavaScript. Это может быть необходимо для корректного отслеживания состояния динамических страниц.

Делается это с помощью методов pushState() или replaceState() объекта window.history.

При изменении адреса странички методом pushState(), он добавится в историю просмотров, а метод replaceState() заменит текущий адрес в истории просмотров.
К примеру, если мы находимся на страничке «page1.html» и заменим её на «page2.html» методом pushState(), а потом нажмём кнопку «Назад» в браузере или воспользуемся методом back(), то мы попадём обратно на страничку «page1.html». В случае с методом replaceState() — этого не произойдёт.

Пример:

// эмуляция перехода на страничку "/page2.html" без перезагрузки странички
history.pushState(2, "Title 2", "/page2.html");
// замена текущего URL на "/page3.html"
history.replaceState(3, "Title 2", "/page3.html");


С помощью 1-го параметра функции можно идентифицировать «состояние страницы» при переходе по истории.
К примеру: если отлавливать событие смены состояния страницы (событие: «popstate»), затем сделать несколько переходов функцией «pushState», и затем нажать кнопку «Назад», то в параметре «state» события мы получим значение этого 1-го параметра, который был передан во время установки данной страницы. Значение данного параметра может быть также и объектом.

Пример:

// Устанавливаем обработчик события "popstate":
window.addEventListener('popstate', function(event) {
// выводим в консоль данные состояния страницы "event.state":
console.log("Page state data:", event.state);
}, false);
// эмуляция перехода на страничку "/page4.html"
history.pushState(4, "Title 4", "/page4.html");
// затем - на страничку "/page5.html"
history.pushState(5, "Title 5", "/page5.html");


И вот если после выполнения этого кода нажать кнопку «Назад» в браузере, то мы получим в консоли такое сообщение:

>> Page state data: 5


Из соображений безопасности, нельзя изменить доменное имя.

На момент написания страницы динамическая подмена URL работала только в FireFox 4 и в последних версиях браузеров на движке WebKit (Chrome, Safari).
(На момент обновления: уже работает в Opera)
Не смотря на это, данный механизм уже интенсивно используют в facebook.com, vkontakte.ru и другие.

Более подробную информацию об этом функционале можно найти здесь:
http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html
http://www.w3.org/TR/2010/WD-html5-20101019/history.html#dom-history-pushstate