URL-адреса, которые генерируются с использованием методов, подобных pushState(), — фальшивые в том смысле, что браузер никогда не проверяет их достоверность и существование документов, на которые они указывают. Наша задача — сделать так, чтобы фальшивые URL-адреса содержали правильную и полезную информацию.
Для создания новой записи в истории браузера и изменения URL-адреса на панели Location (Местоположение) необходимо применить метод push-State(). Давайте посмотрим, как это работает.
Листинг 15.1. Базовый шаблон для тестирования API истории
<!DOCTYPE html>
<html lang="ru">
<head>
<title>API истории 6pay3epa</title>
<link rel="stylesheet" href="history. css">
<script src="history. js"></script>
</head>
<body>
<section id="maincontent">
Это содержимое никогда не обновляется^^
<span id="url">страница 2</span>
</section>
<aside id="databox"></aside>
</body>
</html>
В листинге 15.1 представлен HTML-код с базовыми элементами, необходимыми для тестирования API истории. Внутри элемента <section> находятся постоянное содержимое, идентифицируемое значением main-content, текст, который мы превратим в ссылку для генерирования виртуальной второй страницы веб-сайта, и обычный блок databox для альтернативного содержимого.
Давайте добавим к документу стили.
Листинг 15.2. Стили для полей и элементов <span> (history. css)
#maincontent{ float: left; padding: 20px; border: 1px solid #999999;
}
#databox{ float: left; width: 500px; margin-left: 20px;
Padding: 20px;
Border: 1px solid #999999;
}
#maincontent span{ color: #0000FF; cursor: pointer;
}
В этом примере мы добавим в историю новую запись посредством метода pushState() и обновим содержимое окна, не перезагружая страницу и не загружая другой документ.
Листинг 15.3. Генерация нового URL-адреса и содержимого (history. js)
Function initiate(){
Databox=document. getElementById(‘databox’); url=document. getElementById(‘url’); url. addEventListener(‘click’, changepage, false);
}
Function changepage(){
Databox. innerHTML=’url-адрес — page2′; window. history. pushState(null, null, ‘page2.html’);
}
Window. addEventListener(‘load’, initiate, false);
В функции initiate() из листинга 15.3 мы создали необходимую ссылку на элемент databox и добавили к элементу <span> прослушиватель события click. Когда пользователь щелкает на тексте внутри <span>, происходит вызов функции changepage().
Функция changepage() выполняет две задачи: обновляет содержимое страницы, добавляя новую информацию, и вставляет в список истории новый URL-адрес. После выполнения функции в поле databox отображается текст «url-адрес — страница 2», а URL-адрес главного документа на панели Location (Местоположение) заменяется фальшивым URL page2.html.
Атрибуты state и title для метода pushState() на этот раз объявлялись со значением null. В настоящее время атрибут title ни в одном из браузеров не используется, поэтому ему всегда присваивается значение null, однако атрибут state мы настроим и применим в следующих примерах.
Скопируйте шаблон из листинга 15.1 в HTML-файл. Создайте CSS-файл с названием history. css и поместите в него стили из листинга 15.2. Также создайте JavaScript-файл history. js с кодом из листинга 15.3. Загрузите все файлы на свой сервер и откройте в браузере HTML-файл. Щелкните на тексте «страница 2» и посмотрите на URL-адрес на панели Location (Местоположение) — он примет новое значение, определенное в коде.
Добавить комментарий