Когда волна AJAX пришла в 2005 году, когда Джесси Джеймс Гарретт придумал этот термин, а затем всем захотелось этого, одним из основных недостатков было то, что динамическое обновление только частей веб-страницы приводило к непоследовательной обработке истории и проблемам с кнопками навигации назад / вперед в сети. браузеры и плохой пользовательский опыт. Введите API истории HTML5 .
API истории HTML5 призван предложить веб-разработчикам очень простой способ вставить состояния веб-страницы в историю веб-браузера, тем самым предоставляя ожидаемые функциональные возможности конечным пользователям. Вы можете внести любые изменения в веб-страницу и затем позволить пользователю сделать закладку или иметь возможность вернуться к этому позже, или просто использовать кнопки навигации назад и вперед для перехода между состояниями.
История объекта и состояния
В течение долгого времени у нас было несколько вариантов манипулирования объектом истории, принадлежащим объекту окна, с помощью нескольких методов. Некоторые люди использовали его метод go для предложения навигации, например:
window.history.go (1) или window.history.go (-1)
С помощью API истории HTML5 мы получаем два новых метода: pushState и replaceState. Это способы добавления состояний истории просмотра веб-страниц в ваш веб-браузер. Не волнуйтесь, это не случайная история, а части веб-сайта, который вы в настоящее время посещаете.
Оба метода предлагают три разных параметра:
штат
Объект JavaScript для нового добавления в историю.
заглавие
Название для записи — в настоящее время не используется в некоторых веб-браузерах, но должно быть там для будущей совместимости.
URL
URL-адрес для записи истории, и он может быть абсолютным или относительным к URL-адресу загруженной в данный момент веб-страницы.
Пример кода
Вот как будет выглядеть пример использования History API:
var url = "http://robertnyman.com", title = "Robert's talk", state = { address : url }; window.history.pushState(state, title, url);
История API демо
Я собрал небольшую демонстрацию HTML5 History API , как часть моих демонстраций и примеров HTML5 , где вы можете увидеть его в действии и протестировать, как с ним работают различные веб-браузеры (демонстрация зачаточна и не поддерживает перенаправления сервера, если Вы сохраняете сгенерированные URL для дальнейшего использования). Ниже также представлен код.
Поддержка веб-браузера
API истории HTML5 поддерживается в:
- Firefox 4+
- Гугл Хром
- Safari 5+
- Опера 11.50
В Internet Explorer по-прежнему нет поддержки, и в предварительном просмотре в IE10 не было ни следа, ни указания на то, что он будет добавлен. На данный момент полифилл History.js может оказаться достаточным вариантом для Internet Explorer, но я рассматриваю его только как временное решение.
Mozilla Hacks
Я также рекомендую прочитать статью Mozilla Hacks о History API , и если вы хотите внести что-то интересное, вы также можете принять участие в конкурсе Mozilla Dev Derby .
От http://robertnyman.com/2011/08/03/html5-history-api-and-improving-end-user-experience/