English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Как использовать API истории HTML5, онлайн-примеры демонстрируют, как использовать API истории HTML5, совместимость браузеров, определение синтаксиса и подробную информацию о его свойствах и значениях.
API истории HTML5 позволяет вам через JavaScript получить доступ к истории навигации браузера. API истории HTML5 очень полезен в одностраничных веб-приложениях. Одностраничные веб-приложения могут использовать API истории HTML5 для того, чтобы сделать определённое состояние в приложении "маркируемым". Позже я вернусь к тому, как использовать API истории для создания маркируемого состояния в одностраничных приложениях.
История навигации состоит из一堆 URL. Каждый раз, когда пользователь посещает веб-сайт, URL новой страницы добавляется на вершину стека. Когда пользователь нажимает кнопку "Назад", указатель в стеке перемещается к предыдущему элементу. Если пользователь снова нажмёт кнопку "Вперёд", указатель переместится к вершине стека. Если пользователь нажмёт "Назад", а затем на новую ссылку, верхний элемент стека будет заменён новым URL.
Вот пример истории навигации:
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
Последняя страница, которую вы посещали в истории навигации, была http://myapp.com/great-new-story.html. Если вы нажмёте кнопку "Назад", указатель в истории навигации вернётся к http://myapp.com/news.html. Если вы нажмёте кнопку "Вперёд", указатель в истории навигации переместится к http://myapp.com/great-new-story.html, но если вы нажмёте на другую ссылку (на странице http://myapp.com/news.html), URL этой ссылки http://myapp.com/news.html заменит её в истории навигации.
API истории HTML5 позволяет веб-приложениям получить доступ к истории навигации.
API истории HTML5 позволяет веб-странице访问部分 истории навигации, которая находится в том же домене, что и веб-страница herself. Из соображений безопасности это ограничение необходимо, поэтому веб-страница не может видеть, какие другие веб-сайты посещал пользователь.
Таким образом, API истории HTML5 не позволяет веб-странице добавлять в историю навигации URL, который не находится в той же домене. Это ограничение гарантирует, что когда пользователь начинает вводить веб-страницу, она не может притворяться, что пользователя перенаправили, например, на Paypal, и шифровать его имя пользователя/пароль и т.д.
Вы можете получить доступ к истории через объект history, который в JavaScript можно использовать как глобальный объект (фактически это window.history).
Объект history содержит следующие функции - включая API истории:
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
Функция back() возвращает историю к предыдущему URL. Вызов back() имеет такой же эффект, как и нажатие на кнопку "Назад" в браузере.
Функция forward() перемещает историю вперед к следующей странице истории. Вызов forward() имеет такой же эффект, как и нажатие на кнопку "Переместить вперед" в браузере. Эта функция может быть вызвана только после вызова back() или после нажатия на кнопку "Назад". Если история уже указывает на последний URL в истории, то нет возможности переместиться вперед.
Функция go(index) позволяет перемещаться по истории в зависимости от индекса, переданного в функцию go(). Если вы вызовете go() с отрицательным индексом (например, go(-1)), браузер вернется к истории. Если вы передадите положительный индекс функции go(), браузер переместится вперед по истории (например, go(1)). Индекс указывает на количество шагов вперед или назад в истории, например, 1, 2, -1, -2 и т.д.
Функция pushState(stateObject, title, url) добавляет новый URL в стек истории. Эта функция имеет три параметра. Параметр url - это URL, который добавляется в стек истории. Параметр title обычно игнорируется браузером. Параметр stateObject - это объект, который передается с событием, когда новый URL добавляется в стек истории. Этот stateObject может содержать любую информацию, которую вы хотите. Это просто JavaScript-объект.
Функция replaceState(stateObject, title, url) аналогична функции pushState() и заменяет текущий элемент в стеке истории новым URL. Текущий элемент не всегда является наиболее важным. Это текущий элемент, который указывает на компонент, который может быть любым компонентом в стеке, если уже были вызваны функции back(), forward() и go() объекта history.
Теперь давайте посмотрим на примеры того, как использовать API истории HTML5.
Давайте сначала посмотрим, как использовать функции back() и forward() для перемещения вперед и назад в истории:
history.back(); history.forward();
Помните, что объект history находится в объекте window, поэтому вы также можете написать:
window.history.back(); window.history.forward();
Но, поскольку объект window является доменным объектом, его можно опустить. В оставшейся части этого руководства я буду игнорировать объект window.
Помните, что вы не можете перейти в историю, если вы (или пользователь) не вернулись в историю сначала.
Теперь让我们 посмотрим, как использовать функцию go() для выполнения действий, аналогичных функциям back() и forward(). Сначала это ваше предыдущее действие для просмотра истории назад:
history.go(-1);
Чтобы перейти назад на два шага, передайте параметр -2 функции go(), как показано ниже:
history.go(-2);
Таким образом, чтобы продвинуть историю вперед, вы можете передать положительный индекс функции go(). Вот примеры продвижения вперед на один и два шага в истории:
history.go(1); history.go(2);
Конечно, если вы выполните эти две строки одновременно, история браузера переместится вперед на три шага.
Чтобы добавить состояние в историю, вызовите функцию pushState() объекта history. Вот пример pushState():
var state = {};
var title = "";
var url = "next-page.html";
history.pushState(state, title, url);В этом примере новый URL добавляется в историю. Это также изменяет поле URL в адресной строке браузера, но не заставляет браузер пытаться загрузить этот URL.
Функция replaceState() заменяет текущий элемент истории в истории, указанной на текущий момент. Если пользователь вернулся к истории с помощью кнопки "Назад", это может не быть самым важным элементом. Вот пример replaceState():
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);Заменение состояния также изменяет URL в адресной строке браузера, но не вызывает загрузки этого URL. Страница с замененным URL все еще остается в браузере.
API истории HTML5 позволяет веб-страницам отслеживать изменения в истории браузера. Безопасные ограничения также применяются к этому, поэтому изменения в истории, которые вызывают URL за пределами домена веб-страницы, не уведомляют веб-страницу.
Чтобы отслеживать изменения в истории браузера, установите слушатель на объект window. Вот пример слушателя событий истории браузера:
window.onpopstate = function(event){
console.log("Изменение истории: " + document.location.href);
}Функция обработки событий onpopstate вызывается каждый раз при изменении истории браузера на одной странице (история браузера, страница推送 в историю стека). Реакция на события изменения истории может заключаться в извлечении параметров из URL и загрузке соответствующего контента на страницу (например, через AJAX).
Внимание: только изменения, вызванные любыми "назад" или "вперед" кнопками, или соответствующими функциями истории навигации back(), forward() и go(), вызывают вызов слушателя событий onpopstate. Вызов функций pushState() и replaceState() не вызывает событий изменения истории.
Когда новый URL отправляется в историю записи, URL в адресной строке браузера изменяется на новый URL. Однако браузер не пытается загрузить этот URL. Он только показывает URL и отправляет его в стек, как будто браузер уже访问ил эту страницу, но страница с новым состоянием все еще остается в браузере.
Отправка нового URL в историю записи является полезным методом для добавления определенного состояния в одностраничное приложение (SPA). Например, в одномстраничном онлайн-магазине URL приложения может быть:
http://myshop.com
Приложение может быть способно отображать продукты на одной странице, но как пользователь может отправить ссылку на конкретный продукт другу?
Решение заключается в том, что при загрузке нового продукта, одностраничное приложение отправляет новый URL в историю записи стека. Это не вызывает загрузки нового URL, но действительно делает его видимым в адресной строке браузера. Из этого можно добавить его в закладки или скопировать и вставить в электронную почту и т.д. Вот пример внешнего вида URL, который можно добавить в закладки:
http://myshop.com?productId=234
Или, возможно, это URL с более высокой читаемостью:
http://myshop.com/products/234
或者 это может быть версия, которая немного больше, чем REST (также упоминается тип продукта):
http://myshop.com/products/books/234
После того как URL будет добавлена в историю браузера, страница интернет-магазина将通过 AJAX загрузит соответствующий продукт и покажет его пользователю.
Если пользователь нажимает на кнопку "Назад", событие onpopstate вызовет обработчик события. Затем веб-страница должна проверить, какая новая URL отображается, и если URL вернулась, загрузить домашнюю страницу продукта или приложения, соответствующего этой URL, http://myshop.com.
Это пример кода HTML5, который демонстрирует принцип загрузки данных в браузер с помощью AJAX:
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("загрузка данных из URL: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("история изменилась на: " + document.location.href);
loadUrl(document.location.href);
}
</script>Этот пример содержит две ссылки с JavaScript-侦听ателем щелчка. После щелчка на одну из ссылок соответствующая URL будет добавлена в стек истории и затем загружена в браузере.
Этот пример также включает侦听атель события onpopstate. При нажатии пользователя на кнопку "Назад" или "Вперед" этот侦听атель будет загружать любую URL, которая в настоящее время отображается в поле адреса браузера.
Если пользователь нажимает на ссылку и кнопку "Назад" / "Вперед", то будет применяться пример, который был показан ранее. Но что делать, если пользователь отправляет URL другу или добавляет его в закладки и затем посещает его позже?
Если пользователь пытается перейти к URL с меткой, http://myshop.com/books/123, браузер запросит этот URL у веб-сервера. Веб-сервер должен знать, что он должен отправить обратно одностраничное приложение с URL http://myshop.com. Вам нужно будет настроить веб-сервер для выполнения этой операции.
Таким образом, одностраничные веб-приложения должны проверить URL, используемый при первом загрузке, и использовать этот URL для определения того, что нужно загрузить и показать. Таким образом, если одностраничное приложение уже загрузило URL, например myshop.com/books/123, это приложение должно загрузить соответствующий продукт и показать его. Эта проверка URL должна быть выполнена при инициализации одностраничного приложения.
При написании этой статьи, кроме Opera Mini, все современные браузеры (IE, Safari, Chrome, Firefox) поддерживают API истории HTML5.