Статьи

HTML5 History API и улучшение взаимодействия с конечным пользователем

Февраль 19, 2019

Когда волна 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/

31
Share: