History API в HTML5. Введение

Прикладной интерфейс работы с историей браузера (History API) в HTML5 предоставляет разработчикам возможность изменять URL-адрес веб-сайта без полного обновления страницы. Это возможность особенно пригодится для частичной загрузки некоторых элементов страницы с помощью JavaScript, тогда, когда содержимое страницы существенно отличается и требует нового URL-адреса.

Вот пример. Предположим, что пользователь переходит с главной страницы сайта на страницу со справочной информацией. Для загрузки содержимого этой страницы используется Ajax. Затем этот пользователь переходит на страницу категории "Продукты", контент которой мы снова загружаем с помощью Ajax и заменяем новым содержимым старое. После всего этого наш пользователь решает поделиться URL-адресом. С прикладным интерфейсом браузера History API мы можем изменить URL-адрес страницы прямо во время её использования, при этом сама страница не перезагружается в том смысле, в каком мы привыкли понимать, так чтобы URL-адрес, который пользователь видит являлся бы релевантным и правильным.

Введение

Протестировать функциональность этого прикладного интерфейса проще простого – для этого необходимо зайти в инструменты разработчика и в консоли напечатать слово history. Если этот интерфейс поддерживается в вашем браузере, то вы увидите множество методов, связанных с объектом History:

Нас с вами в данный момент интересуют методы pushState и replaceState. Используя консоль разработчика, мы можем немного поэкспериментировать с этими методами и посмотреть, что происходит с URL-адресом, когда мы их вызываем. На данный момент все, что нам нужно это использовать последний параметр, остальные параметры мы рассмотрим позднее:

Метод replaceState изменяет URL-адрес в адресной строке браузера на "/hello", несмотря на то, что, фактически обработчика для такого адреса на стороне сервера нет, при этом страница не перезагружается, и мы остаемся на той же странице. Но вот в чем заключается проблема здесь. После нажатия на кнопку "Назад" мы не вернемся на предшествовавший изменению адрес , а вернемся на предыдущую страницу. А вся история в том, что метод History API replaceState не ничего не добавляет в историю браузера, он просто заменяет текущий URL-адрес в адресной строке браузера. Чтобы решить эту проблему, нам нужно использовать метод pushState:

Теперь, если мы нажмем на кнопку "Назад", мы увидим, что она работает так, как нам бы хотелось, поскольку pushState изменяет историю браузера, добавляя в него URL-адрес, который мы передаем. Интересно, конечно, но что произойдет, если мы притворимся, что текущий URL-адрес вовсе не myrusakov.ru, а другой сайт?

Данная строчка кода вызовет исключение "SecurityError: The operation is insecure". (Ошибка безопасности. Операция небезопасна’). Это происходит потому, что URL-адрес должен иметь тот же источник (same origin), что и текущий, иначе мы можем получить серьезные проблемы с безопасностью. Эта опасность связана с тем, что у взломщиков появится возможность обмануть людей, заставляя их думать, что они находятся на совершенного другом веб-сайте.

Возвращаясь к другим параметрам, которые могут быть переданы в метод pushState, мы можем суммировать их следующим образом:

1. Первым параметром являются данные, которые нам понадобятся, если состояние веб-страницы изменится, например, каждый раз, когда кто-то нажимает кнопку "Назад" или "вперед" в браузере. Обратите внимание, что в некоторых браузерах объем передаваемых данных ограничен.
2. Второй параметр, строка заголовка элемента истории.
3. URL-адрес, который мы хотим отобразить в адресной строке.

На этом все! А в следующих статьях мы продолжим обсуждать History API.