Данная статья раскрывает предназначение HTML5 History API. До появления данного API мы часто использовали значение хеш-функций, для работы с тяжелыми, одностраничными приложениями, потому что изменение электронного адреса не было возможно без обновления страницы. Кроме того, когда вы изменяете значение хеш-функций для электронного адреса никакие изменения не вносятся в историю браузера. Однако теперь, обе операции доступны благодаря HTML5 History API. Теперь мы можем создавать одностраничные приложения, не применяя значение хеш-функций. Это также позволяет нам создавать приложения благоприятно совместимые с SEO. Кроме того, данная техника позволяет уменьшать трафик - но как? В этой статье займёмся разработкой одностраничного приложения. Для этого загрузим все необходимые ресурсы на первой странице. Это позволит нам в дальнейшем подгружать только нужный контент. Другими словами, во время последующих запросов, вместо того, чтобы постоянно загружать все ресурсы, приложение загрузит только необходимую информацию. Отправка контента должна осуществляться со стороны сервера. Браузерная поддержка На время написания данной статьи HTML5 History API довольно-таки неплохо поддерживается браузерами. Однако, в самом начале скрипта мы создадим проверку. Это позволит проверить браузерную совместимость. Чтобы определить программным путем, поддерживает ли ваш браузер API, используйте следующую проверку: 1 return !!(window.history && history.pushState); Если вы используете Modernizr, то проверка будет следующей: 1 if (Modernizr.history) { 2 // History API Supported 3 } Если ваш браузер не поддерживает History API, то вы можете использовать полизаполнение history.js. Взаимодействие с историей Далее рассмотрим две функции: history.pushState() history.replaceState() С помощью данных функций можно добавлять и обновлять состояние истории. Они работают почти одинаково и принимают один и тот же же набор параметров. В дополнение, можно упоминуть ещё об одной функции: popstate. Чуть позже мы увидим их в действии. Функции pushState и replaceState принимают одинаковое число параметров: state строка в формате JSON. title на данный момент игнорируется всеми браузерами поэтому его лучше установить как null. url представляет собой любой электронный адрес. Данное значение будет обновлено в браузере. Нет разницы, существует данный URL или нет. Самое главное, что страница не будет перезагружена. Различия между данными методами состоит в том, что pushState добавит новую запись в историю, а replaceState заменит текущее значение. Давай рассмотрим работу данных функций на примере. Предположим у нас есть несколько блоков, расположенных в стеке, названные 1 и 2. Так же у нас есть блок 3. Когда мы выполним команду pushState, блок 3 добится в существующий стек. В результате в нём будет 3 блока. Теперь представьте ту же ситуацию. При выполнении функции replaceState, блок 2 будет заменён на блок 3. Таким образом количество блоков останется тем же. Наглядный пример: Метот popstate будет запускаться, при передвижении по истории, используя методы history.go или history.back. В браузерах WebKit команда popstate запускалась бы после события onload, но это не касается Firefox и IE. Примеры: HTML 01 <div class="container"> 02 <div class="row"> 03 <ul class="nav navbar-nav"> 04 <li><a href="home.html" class="historyAPI">Home</a></li> 05 <li><a href="about.html" class="historyAPI">About</a></li> 06 <li><a href="contact.html" class="historyAPI">Contact</a></li> 07 </ul> 08 </div> 09 <div class="row"> 10 <div class="col-md-6"> 11 <div class="well"> 12 Click on Links above to see history API usage using <code>pushState</code> method. 13 </div> 14 </div> 15 <div class="row"> 16 <div class="jumbotron" id="contentHolder"> 17 <h1>Home!</h1> 18 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 19 </div> 20 </div> 21 </div> 22 </div> JavaScript 01 <script type="text/javascript"> 02 jQuery('document').ready(function(){ 03 04 jQuery('.historyAPI').on('click', function(e){ 05 e.preventDefault(); 06 var href = $(this).attr('href'); 07 08 // Getting Content 09 getContent(href, true); 10 11 jQuery('.historyAPI').removeClass('active'); 12 $(this).addClass('active'); 13 }); 14 15 }); 16 17 // Adding popstate event listener to handle browser back button 18 window.addEventListener("popstate", function(e) { 19 20 // Get State value using e.state 21 getContent(location.pathname, false); 22 }); 23 24 function getContent(url, addEntry) { 25 $.get(url) 26 .done(function( data ) { 27 28 // Updating Content on Page 29 $('#contentHolder').html(data); 30 31 if(addEntry == true) { 32 // Add History Entry using pushState 33 history.pushState(null, null, url); 34 } 35 36 }); 37 } 38 </script>