В этом посте я рассмотрю очень интересную на мой взгляд вещь — HTML5 History API. Данная технология позволяет разработчикам производить манипуляции с адресом сайта без перезагрузки страницы. Такая возможность становиться очень полезной для загрузки каких-либо частей страницы с помощью JavaScript, таким образом, что бы содержание менялось и вместе с ним генерировался новый адрес страницы.
Начинаем работу с HTML5 History API
Для того что бы начать работу с API достаточно ввести в консоли разработчика Google Chrome (F12) – window.history. Если Ваш браузер поддерживает API, то Вы увидите древовидный список с внутренними уже добавленными методами объекта для управления историей браузера.
Сейчас рассмотрим два очень интересных метода – pushState и replaceState. В консоли можно с ними всячески побаловаться и посмотреть, что каждая из них делает с адресом страницы. Но по их названию я думаю, что Вы уже догадались для чего эти методы нужны и что они делают. Далее в статье я расскажу про первые параметры этих методов, но сейчас давайте вставим в replaceState последний параметр «HelloWorld» и посмотрим что получиться:
history.replaceState('null','null','HelloWorld');
Метод replaceState перекидывает нас с текущего адреса на HelloWorld, но мы остаемся на той же странице. При использовании replaceState возникают небольшие проблемы. Если нажать на кнопку назад в браузере, то он перекинет Вас на предыдущую страницу, которую Вы посещали. Вся проблема заключается в том, что replaceState не манипулирует историей, а просто изменяет текущий адрес. Исправляется это путем использования метода pushState вместо replaceState.
history.pushState(null, null, ' HelloWorld ');
После этого щелкаем по кнопке назад в браузере и возвращаемся обратно на ту страницу с которой был вызван pushState. Таким образом pushState влияет на историю браузера и передает туда страницы. Теперь можно попробовать вместо HelloWorld вписать адрес другого сайта.
history.pushState(null, null, 'https://tut.by/');
Как только мы попытаемся выполнить эту строчку кода, консоль сразу же заругается и не даст нам выполнить код. Все дело в том, что адреса можно менять только в пределах текущего сайта. Такой запрет сделали специально, ведь в противном случае любой человек мог бы подменивать адрес сайта и обманывать пользователей делая замену настоящего сайта фейком.
Теперь давайте опять вернемся и рассмотрим первые два параметра, которые передаются в pushState.
history.pushState([data], [title], [url]);
- Первый параметр хранит в себе данные всех нажатий на кнопки вперед и назад в браузере. Кстати в Firefox эти данные ограниченны 640 килобайтами;
- Второй параметр является заголовком и передается в виде строки;
- Третий параметр — новый адрес на который нужно перейти.
Небольшое отступление для общего развития
Самым важным в History API является его работа без перезагрузки страницы. Раньше, что бы изменить адрес страницы нужно было пользоваться window.location, но в результате страница все же обновлялась. Решением этой проблемы стало использование хэш навигации. Например в атрибуте href прописывалось #page и адрес страницы изменялся без перезагрузки страницы.
В результате появился уже устаревший метод hashbang, который обновляет адрес страницы без перезагрузки страницы. Но этот метод подвергался критике т.к hashbang не содержал никаких данных на странице и более того например Яндекс индексировал такие хэш страницы. Кстати, изначально Twitter пользовался методом hashbang до 2012 года. Позже Twitter описал новый способ навигации, который как раз основывался на применении History API в слегка измененном виде. Здесь Вы как раз можете подробнее почитать об этом.
Также для работы с History API существует очень хороший плагин – pjax. Именно этот плагин я использовал в большинстве своих последних проектов и он показался мне очень простым и многофункциональным.
На этом все. Надеюсь мой пост был Вам полезен. На все ваши вопросы с удовольствием отвечу в комментариях.