Revision 1046490 of Управление историей браузера

<p>DOM&nbsp;{{ domxref("window") }} объект предоставляет доступ к истории браузера через объект&nbsp;{{ domxref("window.history", "history") }}. Он расширяет&nbsp;полезные свойства и методы, которые позволяют двигаться вперед и назад по&nbsp;истории&nbsp;пользователя, а также - начиная с HTML5 - манипулировать содержимым&nbsp;стека истории.</p>

<h2 id="Путешествование_по_истории">Путешествование по истории</h2>

<p>Перемещайтесь вперед и назад по истории, используя методы&nbsp;<code>back()</code>, <code>forward()</code>&nbsp;и&nbsp;<code>go()</code>.</p>

<h3 id="Передвижение_вперёд_и_назад">Передвижение вперёд и назад</h3>

<p>Чтобы переместиться назад, сделайте:</p>

<pre class="brush: js">
window.history.back();
</pre>

<p>Это будет действовать так же, как если бы&nbsp;пользователь нажал на кнопку Назад на&nbsp;панели инструментов браузера.</p>

<p>Похожим образом, вы&nbsp;можете перемещаться вперед (как если бы&nbsp;пользователь нажал на кнопку Вперед), так:</p>

<pre class="brush: js">
window.history.forward();
</pre>

<h3 id="Перемещение_на_определенный_момент_в_истории">Перемещение на определенный момент в истории</h3>

<p>Вы можете использовать метод <code>go()</code>, чтобы загрузить конкретную страницу из истории сессии,&nbsp;определяемую относительной позицией&nbsp;к&nbsp;текущей странице&nbsp;(относительный показатель текущей страницы равен&nbsp;0).</p>

<p>Переместиться на страницу назад&nbsp;(эквивалент&nbsp;<code>back()</code>):</p>

<pre class="brush: js">
window.history.go(-1);
</pre>

<p><code>Вперед на страницу(или вызвав&nbsp;forward())</code>:</p>

<pre class="brush: js">
window.history.go(1);
</pre>

<p>Кроме того, вы можете двигаться вперед на&nbsp;2 страницы, передавая 2, и так далее.</p>

<p>Вы можете определить количество страниц в стеке истории, посмотрев&nbsp;свойство length:</p>

<pre class="brush: js">
var numberOfEntries = window.history.length;
</pre>

<div class="note"><strong>Замечание:</strong> Internet Explorer поддерживает передачу URL в&nbsp;<code>go()</code>; это не стандартизировано и не поддерживается в&nbsp;Gecko.</div>

<h2 id="Добавление_и_изменение_записей_истории">Добавление и изменение записей истории</h2>

<p>{{ gecko_minversion_header("2") }}</p>

<p>В HTML5 были&nbsp;представлены методы&nbsp;<code>history.pushState()</code>&nbsp;и&nbsp;<code>history.replaceState()</code>, которые позволяют добавлять и изменять записи истории, соответственно. Эти методы работают вместе с событием&nbsp;{{ domxref("window.onpopstate") }}.</p>

<p>Используя <code>history.pushState()</code>&nbsp;можно изменить&nbsp;referrer, который будет использоваться в&nbsp;HTTP заголовке referrer&nbsp;для&nbsp;<a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>&nbsp;объектов. Referrer будет&nbsp;URL документа, в окне которого создали объект&nbsp;<a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p>

<h3 id="Пример">Пример</h3>

<p><span class="nowiki">Представьте страница https://mozilla.org/foo.html, которая выполняет следующий</span>&nbsp;JavaScript:</p>

<pre class="brush: js">
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
</pre>

<p><span class="nowiki">В этом случае адресная строка станет показывать&nbsp;https://mozilla.org/bar.html</span>, но браузер не будет загружать страницу&nbsp;<code>bar.html</code>&nbsp;и даже проверять существует ли она.</p>

<p><span class="nowiki">Предположим, затем пользователь перешел на&nbsp;https://google.com</span>, а затем кликнул Назад. В этом случае URL отобразится как&nbsp;<span class="nowiki">https://mozilla.org/bar.html</span>, а на странице произойдет событие&nbsp;<code>popstate</code>, тогда объект состояния&nbsp;будет содержать копию&nbsp;<code>stateObj</code>. Сама страница будет выглядеть как&nbsp;<code>foo.html</code>, хотя страница могла изменить своё содержание из-за события&nbsp;<code>popstate</code>.</p>

<p><span class="nowiki">Если мы опять нажмём назад, URL изменится на&nbsp;https://mozilla.org/foo.html</span>, а в документе снова&nbsp;произойдёт событие&nbsp;<code>popstate</code>, в этот&nbsp;раз&nbsp;объект состояния&nbsp;будет пуст. Как видим, возвращаясь мы не изменяем&nbsp;содержимое документа,&nbsp;хотя документ может обновить содержимое сам&nbsp;после получения события popstate.</p>

<h3 id="Метод_pushState()">Метод pushState()</h3>

<p><code>pushState()</code>&nbsp;принимает три параметра:&nbsp;объект состояния, заголовок (сейчас игнорируется)&nbsp;и необязательный&nbsp;URL.&nbsp;Давайте рассмотрим каждый из этих трех параметров более детально:</p>

<ul>
 <li>
  <p><strong>объект состояния&nbsp;</strong>— JavaScript объект, ассоцированный с новой записью истории, созданной&nbsp;<code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие&nbsp;popstate, и свойство события&nbsp;state содержит копию&nbsp;объекта записи&nbsp;истории.</p>

  <p>Объект состояния может быть всем, что может сериализироваться. Так как&nbsp;Firefox сохраняет его&nbsp;на диск пользователя, он&nbsp;может&nbsp;быть восстановлен, после того, как пользователь перезапустит браузер.&nbsp;Мы наложили ограничение на этот объект в 640КБ.&nbsp;Если вы передадите больший&nbsp;объект в&nbsp;<code>pushState()</code>, метод бросит исключение. Если вам нужно больше места используйте&nbsp;<code>sessionStorage</code>&nbsp;и/или&nbsp;<code>localStorage</code>.</p>
 </li>
 <li>
  <p><strong>заголовок</strong> — Firefox в данный момент игнорирует этот параметр, хотя может начать использовать его в будущем. Передача пустой строки будет безопасна для следующих реализаций метода. Хотя можете добавить заголовок&nbsp;для состояния, к которому вы направляетесь.</p>
 </li>
 <li>
  <p><strong>URL</strong> — &nbsp;URL новой записи истории. Заметьте, что браузер не пытается загрузить этот URL после вызова&nbsp;<code>pushState()</code>, хотя может попытаться позже, например, когда пользователь перезапустит браузер. URL не обязательно быть абсолютным, он может быть относительным&nbsp;текущей страницы. Новый URL должен идти на тот же домен, протокол и порт,&nbsp;иначе, <code>pushState()</code>&nbsp;будет ругаться. Параметр не обязателен, если он&nbsp;не указан будет использоваться URL текущего документа.</p>
 </li>
</ul>

<div class="note"><strong>Замечание:</strong>&nbsp;В&nbsp;Gecko 2.0 {{ geckoRelease("2.0") }} до&nbsp;Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в&nbsp;JSON. Начиная с&nbsp;Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по&nbsp;<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">алгоритму структурированного клонирования</a>. Он&nbsp;позволяет передавать&nbsp;более широкое разнообразие объектов.</div>

<p>В определенном смысле, вызов&nbsp;<code>pushState()</code>&nbsp;похож на установку&nbsp;<code>window.location = "#foo"</code>, в обоих случаях&nbsp;будет создаваться и активироваться другая&nbsp;запись истории, связанная&nbsp;с текущим документом. Но у&nbsp;<code>pushState()</code>&nbsp;несколько преимуществ:</p>

<ul>
 <li>Новый URL может любым в пределах домена, порта и протокола.&nbsp;В отличие от установки&nbsp;<code>window.location</code>,&nbsp;оставляющего тот же&nbsp;{{ domxref("document") }} и измеющего только хэш.</li>
 <li>Вам не нужно менять URL, если не хочется. Тогда как&nbsp;<code>window.location = "#foo";</code>&nbsp;только создает новую запись истории, если текущий&nbsp;hash не #foo.</li>
 <li>Вы можете связать произвольные данные с вашим&nbsp;новым&nbsp;элементом&nbsp;истории. При подходе на основе хэшей необходимо кодировать все соответствующие данные в короткую&nbsp;строку.</li>
 <li>Если&nbsp;<code>title</code> в дальнейшем используется браузерами, эти данные можно удалить&nbsp;(независимо от хеша).</li>
</ul>

<p>Стоит отметить, <code>что pushState()</code>&nbsp;никогда&nbsp;не вызывает событие&nbsp;<code>hashchange</code>, даже если новый URL отличается только хэшем.</p>

<p>В&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL">XUL</a>&nbsp;документах, он создаёт сцефичный XUL элемент.</p>

<p>В других документах, он создаёт элемент с&nbsp;<code>null</code>&nbsp;namespace URI.</p>

<h3 id="Метод_replaceState()">Метод replaceState()</h3>

<p><code>history.replaceState()</code>&nbsp;работает также, как и&nbsp;<code>history.pushState()</code>, но&nbsp;<code>replaceState()</code>&nbsp;заменяет последнюю запись истории вместо создания новой.</p>

<p><code>replaceState()</code> особенно полезна, когда вы хотите обновить объект состояния или&nbsp;URL&nbsp;текущей записи истории в ответ на&nbsp;действия пользователя.</p>

<div class="note"><strong>Замечание:</strong>&nbsp;В&nbsp;Gecko 2.0 {{ geckoRelease("2.0") }} до&nbsp;Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в&nbsp;JSON. Начиная с&nbsp;Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по&nbsp;<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">алгоритму структурированного клонирования</a>. Он&nbsp;позволяет передавать&nbsp;более широкое разнообразие объектов.</div>

<h3 id="Событие_popstate">Событие popstate</h3>

<p>Popstate событие вызывается&nbsp;каждый раз, когда история изменятся. Если запись истории&nbsp;была создана с помощью вызова <code>pushState</code> или <code>replaceState</code>, свойство <code>state</code><em> </em>события <code>popstate</code> содержит копию записи истории.</p>

<p>Смотрите пример использования&nbsp;{{ domxref("window.onpopstate") }}.</p>

<h3 id="Чтение_текущего_состояния">Чтение текущего состояния</h3>

<p>Когда страница загружается, объект состояния может быть не null. &nbsp;Это может произойти в случае, если страница установила объект состояния (используя&nbsp;<code>pushState()</code>&nbsp;или&nbsp;<code>replaceState()</code>), а затем&nbsp;пользователь перезагрузил браузер. &nbsp;Когда страница перезагружается, произойдёт событие&nbsp;<span style="font-family:courier new">onload</span><span style="font-family:helvetica">, но не&nbsp;<span style="font-family:courier new">popstate</span>.</span>&nbsp; Однако, если вы прочитаете&nbsp;<span style="font-family:courier new">history.state,&nbsp;</span>то получите объект состояния, который получили бы в случае, если событие popstate произошло.</p>

<p>Вы можете прочитать объект состояния текущей записи истории, без ожидания события&nbsp;<code>popstate</code>&nbsp;используя свойство&nbsp;<code>history.state</code>:</p>

<pre class="brush: js">
var currentState = history.state;
</pre>

<h2 id="Пример_2">Пример</h2>

<p>Для полного примера&nbsp;AJAX сайта, смотрите: <a href="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Ajax пример навигации</a>.</p>

<h2 id="Specifications">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Нет изменений по сравнению с {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Функциональность</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>replaceState, pushState</td>
   <td>5</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>10</td>
   <td>11.50</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>history.state</td>
   <td>18</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>10</td>
   <td>11.50</td>
   <td>6.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Функциональность</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>replaceState, pushState</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>history.state</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Смотрите_также">Смотрите&nbsp;также</h2>

<ul>
 <li>{{ domxref("window.history") }}</li>
 <li>{{ domxref("window.onpopstate") }}</li>
</ul>

<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p>