1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: History API
slug: Web/API/History_API
tags:
- API
- DOM
- HTML5
- История
translation_of: Web/API/History_API
---
<p>{{DefaultAPISidebar("History API")}}<br>
DOM-объект {{DOMxRef("Window")}} предоставляет доступ к истории текущей сессии браузера (не путать с <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history">историей браузерных расширений</a>) через объект {{DOMxRef("Window.history","history")}}. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.</p>
<h2 id="Понятия_и_использование">Понятия и использование</h2>
<p>Перемещение назад и вперёд по истории пользователя выполняется с помощью методов {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, и {{DOMxRef("History.go","go()")}}.</p>
<h3 id="Перемещение_вперёд_и_назад">Перемещение вперёд и назад</h3>
<p>Чтобы переместиться назад по истории:</p>
<pre class="brush: js notranslate">window.history.back();
</pre>
<p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br>
Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):</p>
<pre class="brush: js notranslate">window.history.forward();
</pre>
<h3 id="Перемещение_к_определённой_странице_в_истории">Перемещение к определённой странице в истории</h3>
<p>Вы можете использовать метод {{DOMxRef("History.go","go()")}} для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется <code>0</code>.</p>
<p>Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):</p>
<pre class="brush: js notranslate">window.history.go(-1);
</pre>
<p>Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})</p>
<pre class="brush: js notranslate">window.history.go(1);
</pre>
<p>По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p>
<p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p>
<pre class="notranslate">// Обе следующих инструкции обновляют текущую страницу
window.history.go(0)
window.history.go()</pre>
<p>Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства <code>length</code>:</p>
<pre class="brush: js notranslate">var numberOfEntries = window.history.length;
</pre>
<h2 id="Интерфейсы">Интерфейсы</h2>
<dl>
<dt>{{domxref("History")}}</dt>
<dd>Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p>В следующем примере свойству <code>onpopstate</code> назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера</p>
<pre class="notranslate">window.onpopstate = function(event) {
alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}
history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2) // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("api.History")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<h3 id="Справочники">Справочники</h3>
<ul>
<li>{{ domxref("window.history") }}</li>
<li>{{ domxref("window.onpopstate") }}</li>
</ul>
<h3 id="Руководства">Руководства</h3>
<ul>
<li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
</ul>
|
