Возможности отслеживания

Возможности отслеживания.

Пока что мы всего лишь немного изменили историю сеанса. Мы заставили браузер поверить, что пользователь посетил страницу, URL-адреса которой даже не существует. После того как вы щелкнули на ссылке «страница 2», на панели Location (Местоположение) отобразился фальшивый URL-адрес page2.html, а внутрь databox добавилось новое содержимое и ни для одной из этих операций не потребовалось обновлять страницу или загружать другой документ. Это симпатичный трюк, но он еще не завершен. Браузер пока что не считает новый URL-адрес реальным документом. Если вы с помощью кнопок навигации перейдете на шаг назад, а затем на шаг вперед в истории сеанса, то URL-адрес изменится. Новый фальшивый адрес сменится старым адресом главного документа, однако содержимое документа останется неизменным. Нам необходимо отслеживать ситуацию повторного посещения фальшивых URL-адресов и выполнять соответствующие модификации в документе, показывая пользователю правильное состояние.

Раньше мы упоминали свойство state. Значение этого свойства можно устанавливать во время создания нового URL-адреса, и именно с помощью него позднее мы определяем, каким должен быть текущий веб-адрес. Для работы с этим свойством в API предусмотрено новое событие popstate. Оно срабатывает в определенных ситуациях: когда пользователь повторно заходит на URL-адрес или при повторной загрузке документа. У него есть свойство state, содержащее значение состояния, объявленное при генерации URL-адреса методом pushState() или replaceState(). Это значение равно null, если URL-адрес реальный, но при условии, что до этого мы не поменяли его с помощью replaceState(). Соответствующий пример рассмотрим в дальнейшем.

В следующем коде усовершенствуем предыдущий пример, добавив событие popstate и метод replaceState() для распознавания того, какой именно URL-адрес пользователь запрашивает в данный момент.

Листинг 15.4. Отслеживание позиции пользователя (history. js)

Function initiate(){

Databox=document. getElementById(‘databox’); url=document. getElementById(‘url’); url. addEventListener(‘click’, changepage, false); window. addEventListener(‘popstate’, newurl, false); window. history. replaceState(1, null);

}

Function changepage(){ showpage(2);

Window. history. pushState(2, null, ‘page2.html’);

}

Function newurl(e){ showpage(e. state);

}

Function showpage(current){

Databox. innerHTML=’url-адрес — page ‘+current;

}

Window. addEventListener(‘load’, initiate, false);

Мы в своем приложении должны проделать две операции, для того чтобы получить полный контроль над ситуацией. Во-первых, необходимо объявить значение состояния для всех URL-адресов, которые мы собираемся использовать, — как для фальшивых, так и для реальных. А во-вторых, нужно настроить обновление содержимого документа в соответствии с текущим URL.

В функции initiate() из листинга 15.4 мы добавили прослушиватель события popstate. Он будет вызывать функцию newurl() каждый раз при повторном посещении URL-адреса. Данная функция всего лишь обновляет содержимое элемента databox, указывая адрес текущей страницы. Она принимает значение свойства state и отправляет его функции showpage(), которая выводит информацию на экран.

Это работает для любых фальшивых URL-адресов, но, как уже говорилось, у реальных URL-адресов состояние по умолчанию не задано. Используя метод replaceState() в конце функции initiate(), мы меняем информацию о текущей записи (реальном URL главного документа),

Присваивая ей значение состояния 1. Теперь, когда пользователь будет возвращаться к главному документу, мы будем узнавать об этом по значению state.

Функция changepage() почти не изменилась — она всего лишь вызывает функцию showpage() для обновления содержимого документа. Кроме того, здесь мы присваиваем фальшивому URL-адресу значение состояния 2.

Приложение работает следующим образом: когда пользователь щелкает на ссылке «страница 2», на экране отображается сообщение «url-адрес — страница 2», а URL-адрес на панели Location (Местоположение) изменяется на page2.html (но все так же включает в себя полный путь, разумеется). Это мы делали и раньше, а самое интересное начинается сейчас. Если пользователь нажимает на стрелку влево на панели навигации браузера, то на панели Location (Местоположение) появляется предыдущий URL-адрес из списка истории (то есть реальный URL-адрес нашего документа) и срабатывает событие popstate. Это событие вызывает функцию newurl(), которая считывает значение свойства state и отправляет его функции showpage(). Теперь значение состояния равно 1 (мы объявили его для данного URL-адреса в методе replaceState()), кроме того, сообщение на экране меняется на «url-адрес — страница 1». Если пользователь возвращается к фальшивому URL-адресу, щелкнув на стрелке вправо на панели навигации, то значение состояния меняется на 2 и на экране снова отображается сообщение «url-адрес — страница 2».

Как видите, значение свойства state может быть любым, но оно необходимо для проверки того, какой URL-адрес является текущим. Основываясь на значении данного свойства, вы можете адаптировать содержимое документа к актуальной ситуации.

Используйте фрагменты кода из листингов 15.1 и 15.2 для создания HTML-документа и документа со стилями CSS. Скопируйте код из листинга 15.4 в файл history. js и загрузите все файлы на свой сервер. Откройте шаблон HTML в браузере и щелкните на тексте «страница 2». Значение в адресной строке и содержимое поля databox изменятся в соответствии с новым URL-адресом. Несколько раз нажмите на кнопки Назад и Вперед на панели навигации и посмотрите, как URL-адрес и содержимое, связанное с этим URL-адресом, будут обновляться на экране (содержимое документа соответствует текущему состоянию).

URL-адрес page2.html, который мы генерируем в предыдущих примерах с помощью метода pushState(), считается фальшивым, но он должен быть реальным. Назначение этого API — не создавать фальшивые адреса, а предоставлять программистам альтернативный способ сохранения пользовательской активности в истории браузера, для того чтобы пользователь в любой момент (даже после закрытия браузера) мог вернуться к предыдущему состоянию документа. Вы должны удостовериться в том, что код на серверной стороне возвращает это состояние и обеспечивает правильное содержимое для каждого запрошенного URL-адреса (как реального, так и фальшивого).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *