Контроль истории посещений вообще и кнопки 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">ссылка с хеш-д&a cy;нными 3</a>
Последний (неновый) метод:
— history. length — возвращает число страниц в объекте History. Вы мечтаете о чем-то большем? Возможно, и это будет еще реализовано, а пока посмотрим, что мы еще имеем, прямо сейчас.
Добавить комментарий