History Api

Контроль истории посещений вообще и кнопки Back в частности всегда был несбыточной мечтой веб-разработчика, и вот теперь она стала реальностью. Новое History API для DOM-объекта Histoty предоставляет следующие методы:

— history. go(n) — перемещение по истории посещений. В случае отрицательного значения n — переход назад, иначе — вперед;

— history. back() — перемещение, как при нажатии кнопки Back или history. go(-l);

— history. forward() — перемещение, как при нажатии кнопки Forward или history. go(l).

Надо сказать, что все три метода ранее были частично реализованы как в различных браузерах на движке Gecko, так и в Internet Eplorer, но не одинаково и не полностью.

Впрочем, все это просто переходы. Мало? Дальше будет интересней.

Сам объект history содержит коллекцию посещенных страниц, представленных объектом состояния (state object), который, в свою очередь, содержит заголовок страницы, ее url, а также значения value-объектов, состояние DOM-модели. Для работы со всем этим доступны следующие методы:

— history. pushState(data, title [, url ]) — добавление новой позиции в историю. Первый аргумент тут — данные, которые

Теперь будут располагаться под заданным заголовком с присвоенным url;

— window. history. replaceState(data, title [, url ]) — замещение данных.

Пример:

History. pushState({name:’about’},’About’,’/about. html’);

History. replaceState({name:’newName’},’About’,’/about. html’);

Если не совсем понятно, зачем все это нужно, поясняю — таким образом мы можем добавлять и изменять собственные объекты в History. С помощью pushState, в частности, можно поменять (подменить?) адрес существующей страницы. Правда, в пределах одного домена:

<script>

Function setURL(){

History. pushState({name:’next’},’Next Page’,’/next. html’);

}

</script>

<button onclick="setURL();">Next page</button>

Методы pushState и replaceState имеют, помимо прочего, одно важное отличие. После применения первого происходит событие popstate, а replaceState вызывает событие load, что в общем-то совершенно логично. Еще одно событие — hashchange — срабатывает при изменении хеш-данных страницы:

<script>

Window. onhashchange = function () { alert(window. location. hash); }

</script>

<a href="#hash-3">&scy;&scy;&ycy;&lcy;&kcy;&acy; &scy; &khcy;&iecy;&shcy;-&dcy;&a cy;&ncy;&ncy;&ycy;&mcy;&icy; 3</a>

Последний (неновый) метод:

— history. length — возвращает число страниц в объекте History. Вы мечтаете о чем-то большем? Возможно, и это будет еще реализовано, а пока посмотрим, что мы еще имеем, прямо сейчас.