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
|
---
title: History.pushState()
slug: Web/API/History/pushState
tags:
- API
- HTML DOM
- Web
- метод
translation_of: Web/API/History/pushState
---
<p>{{APIRef("DOM")}}</p>
<p>В <a href="/en-US/docs/Web/HTML">HTML</a> документе метод <strong><code>history.pushState()</code></strong> добавляет новое состояние в историю браузера</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre>history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>])
</pre>
<h3 id="Параметры">Параметры</h3>
<p><strong>state object</strong> </p>
<dl>
<dd>Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной <code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие <code>popstate</code>, а свойство <code>state</code> этого события содержит копию объекта состояния с записями истории.</dd>
<dd>Объект состояния может быть чем угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод <code>pushState()</code> выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование <code>sessionStorage</code> и/или <code>localStorage</code>.</dd>
</dl>
<dl>
<dt><strong>title</strong></dt>
<dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояния, в которое переходите.</dd>
</dl>
<dl>
<dt><code>url</code> {{optional_inline}}</dt>
<dd>Через этот параметр передаётся URL-адрес новой записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова <code>pushState()</code>, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе <code>pushState()</code> выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.</dd>
</dl>
<h2 id="Описание">Описание</h2>
<p>Вызов <code>pushState()</code> в некоторой степени похож на установку <code>window.location = "#foo"</code>, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.</p>
<p>Но у <code>pushState()</code> есть несколько преимуществ:</p>
<ul>
<li>Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка <code>window.location</code> оставляет вас на том же {{ domxref("document") }} лишь в том случае, если вы меняете только хэш</li>
<li>Менять URL не обязательно. Тогда как настройка <code>window.location = "#foo";</code> создаёт новую запись в истории, только если текущий хеш не <code>#foo</code></li>
<li>С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку</li>
<li>Если заголовок <code>title</code> впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).</li>
</ul>
<p>Обратите внимание, что <code>pushState()</code> никогда не вызывает событие <code>hashchange</code>, даже если новый URL отличается от старого только хешем.</p>
<h2 id="Примеры">Примеры</h2>
<p>Создание новой записи истории браузера, задавая <em>state</em>, <em>title</em>, и <em>url</em>.</p>
<h3 id="JavaScript">JavaScript</h3>
<pre>const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'
history.pushState(state, title, url)</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/ru/docs/Web/API/History_API/Working_with_the_History_API">Работа с History API</a></li>
</ul>
|
