Статьи

Обзор API истории JavaScript

Январь 2, 2019

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

Управление историей

API History позволяет разработчикам добавлять, удалять и заменять записи истории, изменяя поведение кнопок «Назад» и «Вперед». Кроме того, вы можете извлекать информацию о состоянии и использовать ее для управления содержимым документа. Все это делается с использованием объекта historywindow

Перемещение назад и вперед

Объект historyback()forward() Вызов history.back() Это имеет тот же эффект, что и нажатие кнопки «Назад». Аналогично, вызов history.forward()

Перемещение к определенной исторической точке

Объект historygo() Например, если вы history.go(-3) Аналогичным образом, вызов history.go(3) Вызов history.go(-1)history.go(1)history.back()history.forward()

Примечание. IE позволяет разработчикам передавать URL-адреса в go() Однако это не стандартно, и его следует избегать.

Подсчет количества записей истории

Количество страниц в истории можно узнать, обратившись к свойству длины объекта history 

 alert(history.length);

Манипулирование записями истории

Объект historypushState()replaceState()

Использование pushState()

Допустим, следующий код выполняется на http://localhost/index.html 

 history.pushState({page:2},"Page 2","page2.html");

Это заставит браузер изменить URL-адрес текущей страницы на http://localhost/page2.html Но это не изменит содержание страницы и не перезагрузит ее. Браузер даже не проверит, что page2.html Он просто отобразит URL в адресной строке.

Теперь предположим, что вы посещаете http://www.sitepoint.com Браузер загрузит http://localhost/page2.html Когда страница загружена, она также получит событие popstate В приведенном выше коде JavaScript мы передали объект в pushState()state Мы можем извлечь этот объект из popstatestate

Метод pushState()

  1. State Object — этот объект связан с новой записью истории, которая добавляется в стек.
  2. Заголовок — название новой записи истории. В настоящее время Firefox игнорирует этот параметр, но он может быть использован в будущем.
  3. URL — URL-адрес для отображения пользователю. Он может быть абсолютным или относительным, но URL должен иметь то же происхождение, что и текущий URL. В противном случае метод вызовет исключение.

Чтобы укрепить концепцию проталкивания состояний, предположим, что у нас есть три страницы: index.htmlpage1.htmlpage2.html Содержимое HTML index.html 

 <html>
  <head>
    <title>Demo Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  </head>
  <body>
    <input type="button" id="push" value="Push History"/>
  </body>
</html>

Теперь следующий код JavaScript добавлен в документ: 

 $(document).ready(function(){
  $("#push").click(function(){
    history.pushState({page: 1},"Page 1","page1.html");
    history.pushState({page: 2},"Page 2","page2.html");
  });
});

Следующий код JavaScript добавлен в page2.html 

 $(document).ready(function(){
  window.onpopstate=function(event){
  alert("location: "+document.location+" and state: "+event.state.page);
  }
});

Если вы загрузите http://localhost/index.htmlhttp://localhost/page2.html Тем не менее, содержание страницы не изменится. Если вы перейдете на другую страницу и нажмете кнопку «Назад», браузер загрузит page2.html Страница также получит событие popstate Свойство statehistory.pushState()

Если вы снова нажмете кнопку «Назад» еще раз, URL изменится на http://localhost/page1.htmlpopstatepage2.html Обратите внимание, что хотя URL-адрес изменен на page1.htmlpage2.html

Использование replaceState()

history.replaceState()history.pushState()

Практическое использование

Когда вы нажимаете на конкретную фотографию в альбоме Facebook, вы видите, что URL-адрес меняется, и отображается изображение. Все это происходит без перезагрузки страницы.

Также ознакомьтесь с Интернет-магазином Chrome . Когда вы нажимаете на конкретное приложение, все детали приложения отображаются в модальном окне, и URL-адрес страницы изменяется. Дело в том, что у каждого приложения есть собственный URL, который пользователи могут добавить в закладки.

Мы можем реализовать аналогичную функциональность, используя History API. В этом примере мы создадим простую фотогалерею. Если пользователь нажимает на конкретную фотографию, картинка открывается в стиле лайтбокса. Мы расширяем функциональность, предоставляя каждой фотографии свой собственный URL. Когда изображение открывается, URL-адрес страницы изменяется, чтобы отразить адрес текущего открытого изображения.

Шаг 1

Мы начнем с создания простой HTML-страницы и добавления к ней нескольких изображений, как показано ниже. Обратите внимание, что я включил prettyPhoto, плагин jQuery для создания эффекта лайтбокса.

demo.html 

 <html>
  <head>
    <title>Demo Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/jquery.prettyPhoto.js" charset="utf-8"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css"/>
    <script type="text/javascript" src="customurl.js" charset="utf-8"></script>
  </head>
  <body>
    <div align="center">
      <a href="/demos/history/pics/image1.jpg" rel="prettyPhoto" id="1"><img src="pics/image1.jpg" height="300"
      width="300"/></a>
      <a href="/demos/history/pics/image2.jpg" rel="prettyPhoto" id="2"><img src="pics/image2.jpg" height="300"
      width="300"/></a>
      <a href="/demos/history/pics/image3.jpg" rel="prettyPhoto" id="3"><img src="pics/image3.jpg" height="300"
      width="300"/></a>
      <a href="/demos/history/pics/image4.jpg" rel="prettyPhoto" id="4"><img src="pics/image4.jpg" height="300"
      width="300"/></a>
    </div>
  </body>
</html>

Шаг 2

Мы продолжаем добавлять JavaScript на страницу. Содержание файла customurl.js, включенного в страницу, показано ниже. Сначала мы создаем фотогалерею, инициализируя prettyPhoto. Затем, когда пользователь нажимает на ссылку, мы берем номер изображения и создаем поддельный URL-адрес изображения на основе номера. Затем мы помещаем его в стек истории. Точно так же, когда пользователь закрывает изображение, мы извлекаем текущую запись истории из стека. В результате оригинальный URL возвращается в адресную строку. 

 $(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function(){history.pushState("","","/demos/history/demo.html"); document.title="Demo Page";}
  });
  $("a").click(function(){
    var id=$(this).attr("id");
    var img="image"+id;
    var url="images/"+img+"/";
    history.pushState("","",url);
    document.title=img;
  });
  function getParameter(name){
    if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
  }
  var image=getParameter("id");
  if(typeof image !='undefined'){
    var event=document.createEvent('MouseEvents');
    event.initEvent('click',true,true);
    document.getElementById(image).dispatchEvent(event);
  }
});

Шаг 3

Что если пользователь напрямую обращается к URL поддельного изображения? Браузер отправит сообщение об ошибке 404, указывающее, что страница не найдена. Чтобы преодолеть это, мы создаем серверный PHP-скрипт. Сценарий получает номер изображения из запроса и перенаправляет пользователя в demo.html

В нашем коде JavaScript внутри demo.htmlgetParameter() Мы уже дали нашей фотогалерее ссылки на конкретные атрибуты id Если номер изображения найден в URL, мы создаем событие click В результате изображение отображается с эффектом лайтбокса.

Вы можете найти полную рабочую демонстрацию здесь .

Дальнейшее чтение

Вы можете посетить Сеть разработчиков Mozilla, чтобы узнать больше об History API. Также ознакомьтесь с объектом history чтобы узнать больше о его свойствах и методах.

33
Share: