В следующем примере рассмотрим более практичное приложение. Мы воспользуемся возможностями API истории и изученными ранее методами для загрузки набора из четырех изображений одного документа. Каждое изображение свяжем с фальшивым URL-адресом, который можно будет в дальнейшем использовать для запроса определенного изображения с сервера.
Главный документ загружается с изображением по умолчанию. Это изображение связывается с первой из четырех ссылок, являющихся частью постоянного содержимого. Все эти ссылки указывают на фальшивые URL-адреса и ссылаются на состояния, а не на реальные документы. То же самое относится к ссылке на главный документ, которая заменяется на page1.html. Вам станет понятнее, что здесь происходит, когда мы чуть позже подробно разберем пример.
Листинг 15.5. Шаблон для «реального» приложения
<!DOCTYPE html>
<html lang="ru">
<head>
<title>API истории</title>
<link rel="stylesheet" href="history. css">
<script src="history. js"></script>
</head>
<body>
<section id="maincontent">
Это содержимое никогда не обновляется^^
<span id="url1">изображение 1</span> -<span id="url2">изображение 2</span> -<span id="url3">изображение 3</span> -<span id="url4">изображение 4</span> -</section>
<aside id="databox">
<img id="image" src="http://www.minkbooks.com/content/monster1.gif">
</aside>
</body>
</html>
Единственное различие между новым и предыдущим приложениями заключается в количестве ссылок и создаваемых URL-адресов. В коде из листинга 15.4 было два состояния: 1, соответствующее главному документу, и 2 для фальшивого URL-адреса page2.html, который мы создавали с помощью метода pushState(). В данном примере необходимо автоматизировать процесс, чтобы создать четыре фальшивых URL-адреса, соответствующих каждому из доступных изображений.
Листинг 15.6. Манипулирование историей (history. js)
Function initiate(){ for(var f=1;f<5;f++){
Url=document. getElementById(‘url’+f); url. addEventListener(‘click’, function(x){ return function(){ changepage(x);}
}(f), false);
}
Window. addEventListener(‘popstate’, newurl, false); window. history. replaceState(1, null, ‘page1.html’);
}
Function changepage(page){ showpage(page);
Window. history. pushState(page, null, ‘page’+page+’.html’);
Function newurl(e){ showpage(e. state);
}
Function showpage(current){ if(current!=null){
Image=document. getElementById(‘image’); image. src=’http://www.minkbooks.com/content/monster’ + current + ‘.gif’;
}
}
Window. addEventListener(‘load’, initiate, false);
Как видите, мы используем те же функции, но с заметными изменениями. Во-первых, внутри функции initiate() передаем методу replaceState() атрибут url со значением page1.html. Мы решили запрограммировать наше приложение таким способом: объявить для главного документа состояние 1 и связать с ним URL-адрес page1.html (независимо от реального URL-адреса документа). Благодаря этому становится проще переходить от одного URL к другому, так как для построения адресов мы всегда используем один и тот же формат, меняется только значение свойства state. В этом можно убедиться, изучив код функции changepage(). Каждый раз, когда пользователь щелкает на одной из ссылок в шаблоне, происходит вызов этой функции, фальшивый URL-адрес собирается с учетом значения переменной page и добавляется в список истории. Значение, получаемое этой функцией, заранее устанавливается в цикле for в начале функции initiate(). Мы задаем значение 1 для ссылки url1, 2 — для url2 и т. д.
Когда пользователь посещает любой URL-адрес, выполняется функция showpage(). Она обновляет содержимое страницы (изображение) в соответствии с выбранным URL. Поскольку иногда, когда срабатывает событие popstate, значение свойства state равно null (например, после самой первой загрузки главного документа), прежде чем делать что-либо еще, мы проверяем значение, полученное функцией showpage(). Если оно отличается от null, значит, для данного URL-адреса определено свойство state, и на экран выводится изображение, соответствующее этому состоянию.
В этом примере используются изображения monster1.gif, monster2.gif, monster3.gif и monster4.gif, и их нумерация соответствует значениям свойства state. Таким образом, мы можем ориентироваться на значение этого свойства для выбора изображения, которое будет выведено на экран.
Однако всегда необходимо помнить, что это значение может быть абсолютно произвольным и процесс создания фальшивых URL-адресов и соответствующего содержимого необходимо настроить в зависимости от требований конкретного приложения.
Также помните, что у пользователей должна быть возможность вернуться к любому из сгенерированных приложением URL-адресов и во всех случаях увидеть на экране правильное содержимое. Вы должны подготовить серверную сторону для обработки этих URL, гарантировав, что любое состояние всегда будет доступно и готово к использованию. Например, пользователь открывает новое окно и вводит URL-адрес page2. html. В этом случае сервер должен возвратить главный документ с изображением monster2.gif, а не просто шаблон из листинга 15.5. Основной смысл этого API в том и заключается, чтобы обеспечить для пользователей возможность в любой момент вернуться к любому предыдущему состоянию, а сделать это можно только одним способом — превратив фальшивые URL в допустимые.
В листинге 15.6 мы использовали цикл for для добавления прослушивателя события click к каждому элементу <span> в документе. Здесь мы воспользовались техникой JavaScript, позволяющей отправлять функциям реальные значения. Для того чтобы отправить функции обратного вызова в методе addEventListener() конкретное значение, необходимо задать само это значение, а не содержащую его переменную. Если использовать переменную, то в действительности функция получит не значение, а ссылку на него. Таким образом, для отправки текущего значения переменной f цикла for нам пришлось воспользоваться двумя анонимными функциями. Первая функция выполняется в момент вызова метода addEventListener(). Она получает текущее значение переменной f (обратите внимание на круглые скобки в конце) и помещает его в переменную х. Затем функция возвращает вторую анонимную функцию со значением переменной x.
Именно вторая функция выполняется с правильным значением при срабатывании события. Чтобы побольше узнать об этой технике, зайдите на наш веб-сайт и изучите ссылки для этой главы.
Для тестирования последнего примера используйте HTML-документ из листинга 15.5 и файл со стилями CSS из листинга 15.2. Скопируйте код из листинга 15.6 в файл hist. ory. js и загрузите все файлы на свой сервер. Откройте шаблон в браузере и пощелкайте на ссылках. Затем испытайте перемещение по уже посещенным URL-адресам с помощью навигационных кнопок браузера. Изображения на экране должны меняться в соответствии с тем, какой URL-адрес отображается на панели Location (Местоположение).
API History (история) — краткий справочник
API History (История) позволяет манипулировать хранящейся в браузере историей сеанса, отслеживая таким образом активность пользователя в пределах одного документа. Этот API добавлен в официальную спецификацию и носит название интерфейса History (История). В данном интерфейсе старые и давно существующие методы и свойства объединяются с новыми:
— length. Это свойство возвращает общее число записей в списке истории;
— state. Это свойство возвращает состояние для текущего URL-адреса; О go(step). Этот метод переводит браузер назад или вперед на несколько шагов в списке истории в зависимости от значения атрибута step. Значение атрибута может быть отрицательным и положительным, определяя разные направления перемещения;
— back(). Этот метод загружает предыдущий URL-адрес в списке истории;
— forward(). Этот метод загружает следующий URL-адрес в списке истории;
— pushState(state, title, url). Этот метод вставляет новые данные в список истории. Атрибут state содержит значение состояния, которое мы хотим связать с новой записью. Атрибут title представляет собой заголовок записи. Атрибут url — это новый URL-адрес, который мы добавляем в список истории;
— replaceState(state, title, url). Этот метод модифицирует текущую запись в списке истории. Атрибут state содержит значение состояния, которое мы хотим поместить в текущую запись. Атрибут title представляет собой заголовок записи. А атрибут url — это новый URL-адрес, который мы добавляем в текущую запись списка истории;
— popstate. Это событие срабатывает в определенных обстоятельствах и сообщает о текущем состоянии.
Добавить комментарий