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

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

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

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

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

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

<pre>
window.history.back();
</pre>

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

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

<pre>
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>
<code>window.history.go(-1);</code>
</pre>

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

<pre>
<code>window.history.go(1);</code>
</pre>

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

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

<pre>
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;<code>history.pushState()</code>&nbsp;и&nbsp;<code>history.replaceState()</code>&nbsp;методы, которые позволяют добавлять и изменять записи истории, соответственно. Эти методы работают вместе вместе с событием&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">Представьте&nbsp;https://mozilla.org/foo.html, которая выполняет следующий</span>&nbsp;JavaScript:</p>

<pre>
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, в этот&nbsp;раз</code>&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 событие, и свойство state события&nbsp;копию&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 в данный момент игнорирует этот параметр, хотя может начать использовать его в будущем. Передача пустой строки будет безопасна для следующих реализаций метода. Хотя можете добавить заголовок, для состояния к которому вы направляетесь.</p>
 </li>
 <li>
  <p><strong>URL</strong> — &nbsp;URL новой записи истории. Заметьте, что браузер не пытается загрузить этот URL после вызова&nbsp;<code>pushState()</code>, хотя может попытаться позже, например, когда пользователь перезапустит браузер. URL не обязательно быть аблосютным, он может относительным относительно текущей страницы. Новый URL должен идти на тот же домен, протокол и порт; иначе, <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">алгоритму structured clone</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,&nbsp;</code>оставляющего тот же&nbsp;{{ domxref("document") }} и измеющего только хэш.</li>
 <li>Вам не нужно менять URL, если не хочется. Тогда как&nbsp;<code>window.location = "#foo";</code>&nbsp;только создает новую запись истории без hash изменяется.</li>
 <li>Вы можете связать произвольные данные с вашим&nbsp;новым&nbsp;элементом&nbsp;истории. При подходе на основе хэш&nbsp;необходимо кодировать все соответствующие данные в короткую&nbsp;строку.</li>
</ul>

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

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

<p><code>history.replaceState()</code>&nbsp;работает также, как и&nbsp;<code>history.pushState(), но&nbsp;</code><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">алгоритму structured clone</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>Когда страница загружается, объект состояния пуст. &nbsp;Но пуст не будет, например, страница установила объект состояния&nbsp;(используя&nbsp;<code>pushState()</code>&nbsp;или&nbsp;<code>replaceState()</code>), а потом пользователь перезагрузил браузер. &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>то получите назад объект состояния, который у вас был, когда пробило событие&nbsp;&nbsp;<span style="font-family:courier new">popstate</span>.</p>

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

<pre>
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="Поддержка_браузрами">Поддержка браузерами</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>