Данная статья раскрывает предназначение HTML5 History API. До появления данного API мы часто использовали значение хеш-функций, для работы с тяжелыми, одностраничными приложениями, потому что изменение электронного адреса не было возможно без обновления страницы. Кроме того, когда вы изменяете значение хеш-функций для электронного адреса никакие изменения не вносятся в историю браузера.
Однако теперь, обе операции доступны благодаря HTML5 History API. Теперь мы можем создавать одностраничные приложения, не применяя значение хеш-функций. Это также позволяет нам создавать приложения благоприятно совместимые с SEO. Кроме того, данная техника позволяет уменьшать трафик - но как?
В этой статье займёмся разработкой одностраничного приложения. Для этого загрузим все необходимые ресурсы на первой странице. Это позволит нам в дальнейшем подгружать только нужный контент. Другими словами, во время последующих запросов, вместо того, чтобы постоянно загружать все ресурсы, приложение загрузит только необходимую информацию.
Отправка контента должна осуществляться со стороны сервера.
Браузерная поддержкаНа время написания данной статьи HTML5 History API довольно-таки неплохо поддерживается браузерами. Однако, в самом начале скрипта мы создадим проверку. Это позволит проверить браузерную совместимость.
Чтобы определить программным путем, поддерживает ли ваш браузер API, используйте следующую проверку:
Return !!(window.history && history.pushState);
Если вы используете Modernizr, то проверка будет следующей:
If (Modernizr.history) { // History API Supported }
Если ваш браузер не поддерживает History API, то вы можете использовать полизаполнение history.js .
Взаимодействие с историейС помощью данных функций можно добавлять и обновлять состояние истории. Они работают почти одинаково и принимают один и тот же же набор параметров. В дополнение, можно упоминуть ещё об одной функции: popstate . Чуть позже мы увидим их в действии.
Функции pushState и replaceState принимают одинаковое число параметров:
Различия между данными методами состоит в том, что pushState добавит новую запись в историю, а replaceState заменит текущее значение. Давай рассмотрим работу данных функций на примере.
Предположим у нас есть несколько блоков, расположенных в стеке, названные 1 и 2. Так же у нас есть блок 3. Когда мы выполним команду pushState , блок 3 добится в существующий стек. В результате в нём будет 3 блока.
Теперь представьте ту же ситуацию. При выполнении функции replaceState , блок 2 будет заменён на блок 3. Таким образом количество блоков останется тем же.
Наглядный пример:
Метот popstate будет запускаться, при передвижении по истории, используя методы history.go или history.back . В браузерах WebKit команда popstate запускалась бы после события onload , но это не касается Firefox и IE.
Примеры: HTMLClick on Links above to see history API usage using pushState method. Home!
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
JavaScriptjQuery("document").ready(function(){ jQuery(".historyAPI").on("click", function(e){ e.preventDefault(); var href = $(this).attr("href"); // Getting Content getContent(href, true); jQuery(".historyAPI").removeClass("active"); $(this).addClass("active"); }); }); // Adding popstate event listener to handle browser back button window.addEventListener("popstate", function(e) { // Get State value using e.state getContent(location.pathname, false); }); function getContent(url, addEntry) { $.get(url) .done(function(data) { // Updating Content on Page $("#contentHolder").html(data); if(addEntry == true) { // Add History Entry using pushState history.pushState(null, null, url); } }); }
Если вам никогда раньше не приходилось встречаться с объектом history, не стоит волноваться по этому поводу. До сих пор он не мог предложить нам ничего полезного. В действительности, традиционный объект history имеет только одно свойство и три основных метода. Это свойство length - содержит информацию о количестве элементов в списке истории просмотров (т.е. в поддерживаемом браузером списке недавно посещенных веб-страниц). Вот пример использования этого свойства:
Alert("У вас сохранено " + history.length + " страниц, в истории браузера.");
History.back();
Эффект этого метода равнозначен нажатию пользователем кнопки браузера "Назад". Подобным образом можно использовать метод forward() для перемещения на один шаг вперед или метод go() для перехода вперед или назад на определенное количество шагов.
Но все это не представляет большой ценности, если только вы не хотите создать для веб-страницы собственные кнопки "Назад" и "Вперед". Но HTML5 добавляет этому объекту history несколько дополнительных возможностей, которые можно использовать для реализации намного более амбициозных задач.
Главной из этих возможностей является метод pushState() , который позволяет изменить URL в адресной строке браузера, не обновляя при этом содержимого страницы. Эта возможность приходится кстати в специфической ситуации, а именно при создании динамических страниц, которые незаметно загружают новое содержимое и плавно обновляют себя. В такой ситуации URL страницы и ее содержимое могут рассогласоваться.
Например, если страница загрузит в динамическом режиме содержимое с другой страницы, первоначальный URL страницы не изменится, что может вызвать разнообразные проблемы с созданием закладки для этой страницы. Эту проблему можно решить с помощью отслеживания истории сеансов.
Если вы пока не видите, как это сделать не переживайте, в следующем разделе мы рассмотрим страницу, идеально подходящую для применения истории просмотров.
До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) - это история одного таба. С появлением HTML5 history API все изменилось - теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.
Основные понятия и синтаксис History API опирается на один DOM интерфейс - объект History. Каждый таб имеет уникальный объект History, который находится в window.history . History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.Основные методы объекта History:
Мы используем data-* атрибуты для хранения заголовка каждой картинки и используем свойство dataset для получения этого свойства:
HTML5 history приходит на помощь! Каждый раз когда мы выбираем файл создается новая запись истории и location документа обновляется (оно содержит уникальный URL картинки). Это означает, что мы можем использовать кнопку назад для обхода наших изображений, в то время как в строке адреса у нас будет прямая ссылка на картинку, которую мы можем сохранить в закладки или отправить кому-либо.
Код У нас есть 2 дива. Один содержит структуру папок, другой содержит текущую картинку. Все приложение управляется с помощью JavaScript. В будут освещены только самые важные моменты. Исходный код примера очень короткий (порядка 80 строк) посмотрите его после прочтения всей статьи.Метод bindEvents навешивает обработчики для события popstate , который вызывается, когда пользователь переходит по истории и позволяет приложению обновлять свое состояние.
window.addEventListener("popstate", function(e){
self.loadImage(e.state.path, e.state.note);
}, false);
Объект event , который передается в обработчик события popstate имеет свойство state - это данные, которые мы передали в качестве первого аргумента pushState или replaceState .
Мы навешиваем обработчик на событие click на див, который представляет нашу файловую структуру. Используя делегацию событий, мы открываем или закрываем папку или загружаем картинку (с добавлением записи в историю). Мы смотрим на className родительского элемента для того, чтобы понять на какой из элементов мы нажали:
- Если это папка мы открываем или закрываем её
- Если это картина, то мы показываем её и добавляем элемент истории
Dir.addEventListener("click", function(e){
e.preventDefault();
var f = e.target;
// Это папка
if (f.parentNode.classList.contains("folder")) {
// Открываем или закрываем папку
self.toggleFolders(f);
}
// Это картинка
else if (f.parentNode.classList.contains("photo")){
note = f.dataset ? f.dataset.note: f.getAttribute("data-note");
// отрисовываем картинку
self.loadImage(f.textContent, note);
// добавляем элемент истории
history.pushState({note: note, path:f.textContent}, "", f.textContent);
}
}, false);
Метод, который изменяет содержимое картинки и обновляет её подпись очень прост:
loadImage: function(path, note){
img.src = path;
h2.textContent = note;
}
Мы получили простое приложение , демонстрирующее возможности обновленного интерфейса объекта History . Мы используем pushState для добавления элемента истории и событие popstate для обновления содержимого страницы. Кроме этого при клике на картинку мы получаем в адресной строке её действительный адрес, который мы можем сохранить или отправить кому-нибудь.
Здравствуйте, уважаемые читатели a! Сегодняшняя статья будет посвящена работе с HTML5 History API . В прошлых версиях HTML у нас был ограниченный контроль над историей браузера. Мы могли перемещаться по истории вперед и назад с помощью доступных методов. Теперь, благодаря HTML5 History API, у нас есть больше возможностей использования истории браузера пользователя: можно «гулять» по истории, добавлять свои элементы в историю и обновлять текущую запись в истории.
Что это?HTML5 History API представляет собой стандартизированный способ манипулировать историей браузера с помощью . Часть этого API — навигация по истории, была доступна в предыдущих версиях HTML. В HTML5 включили возможность добавлять записи в историю браузера, чтобы визуально изменить URL в адресной строке браузера (без обновления страницы) и заменять текущую запись в истории браузера. Это означает, что URL в адресной строке браузера так и остается уникальным идентификатором для текущего ресурса, даже в приложениях с большим количеством скриптов, которые зачастую не выполняют полного обновления страницы.
Поддержка браузеровНа текущий момент данный API поддерживается множеством браузеров. Более подробно Вы можете узнать об этом .
Чтобы программно определить, поддерживается ли API, используем:
Если браузер не поддерживает API или Вы ищете кроссбраузерное решение, то можно использовать плагин history.js . Построен на основе HTML5 History API и использует те же самые методы, в то же время можно не беспокоиться о работоспособности в старых браузерах.
Методы и свойства API
Давайте рассмотрим на примере работу с методом pushState . Допустим имеются 3 страницы почти с одинаковым содержанием. Разметка выглядит следующим образом:
1 |
|
Вот как мы будем обрабатывать клики в меню:
1 | $("document"
)
.ready
(function
()
{
// Добавляем обработчик события popstate,
// Функция загрузки контента
|
Вы можете перейти на демонстрационную страницу, чтобы наглядно посмотреть как все происходить при использовании метода pushState . Или скачать исходники и поэкспериментировать.
До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) - это история одного таба. С появлением HTML5 history API все изменилось - теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.
Основные понятия и синтаксис History API опирается на один DOM интерфейс - объект History. Каждый таб имеет уникальный объект History, который находится в window.history . History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.Основные методы объекта History:
Мы используем data-* атрибуты для хранения заголовка каждой картинки и используем свойство dataset для получения этого свойства:
HTML5 history приходит на помощь! Каждый раз когда мы выбираем файл создается новая запись истории и location документа обновляется (оно содержит уникальный URL картинки). Это означает, что мы можем использовать кнопку назад для обхода наших изображений, в то время как в строке адреса у нас будет прямая ссылка на картинку, которую мы можем сохранить в закладки или отправить кому-либо.
Код У нас есть 2 дива. Один содержит структуру папок, другой содержит текущую картинку. Все приложение управляется с помощью JavaScript. В будут освещены только самые важные моменты. Исходный код примера очень короткий (порядка 80 строк) посмотрите его после прочтения всей статьи.Метод bindEvents навешивает обработчики для события popstate , который вызывается, когда пользователь переходит по истории и позволяет приложению обновлять свое состояние.
window.addEventListener("popstate", function(e){
self.loadImage(e.state.path, e.state.note);
}, false);
Объект event , который передается в обработчик события popstate имеет свойство state - это данные, которые мы передали в качестве первого аргумента pushState или replaceState .
Мы навешиваем обработчик на событие click на див, который представляет нашу файловую структуру. Используя делегацию событий, мы открываем или закрываем папку или загружаем картинку (с добавлением записи в историю). Мы смотрим на className родительского элемента для того, чтобы понять на какой из элементов мы нажали:
- Если это папка мы открываем или закрываем её
- Если это картина, то мы показываем её и добавляем элемент истории
Dir.addEventListener("click", function(e){
e.preventDefault();
var f = e.target;
// Это папка
if (f.parentNode.classList.contains("folder")) {
// Открываем или закрываем папку
self.toggleFolders(f);
}
// Это картинка
else if (f.parentNode.classList.contains("photo")){
note = f.dataset ? f.dataset.note: f.getAttribute("data-note");
// отрисовываем картинку
self.loadImage(f.textContent, note);
// добавляем элемент истории
history.pushState({note: note, path:f.textContent}, "", f.textContent);
}
}, false);
Метод, который изменяет содержимое картинки и обновляет её подпись очень прост:
loadImage: function(path, note){
img.src = path;
h2.textContent = note;
}
Мы получили простое приложение , демонстрирующее возможности обновленного интерфейса объекта History . Мы используем pushState для добавления элемента истории и событие popstate для обновления содержимого страницы. Кроме этого при клике на картинку мы получаем в адресной строке её действительный адрес, который мы можем сохранить или отправить кому-нибудь.
