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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: popstate
slug: Web/API/Window/popstate_event
translation_of: Web/API/Window/popstate_event
---
<p>Событие <code>popstate</code> вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method">history.pushState()</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a></code>, то состояние события <code>popstate</code> будет содержать <code>state </code>копии входящего в историю объекта</p>
<p>Обратите внимание, <code>history.pushState()</code> или <code>history.replaceState()</code> не вызывают событие <code>popstate</code>. Событие <code>popstate</code> будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове <code>history.back()</code> или <code> history.forward()</code> из JavaScript).</p>
<p>Браузеры работают с событием <code>popstate</code> по разному. Chrome (prior to v34) и Safari всегда вызывают <code>popstate</code> по окончании загрузки страницы, а Firefox не делает этого.</p>
<h2 id="General_info">General info</h2>
<dl>
<dt style="float: left; text-align: right; width: 120px;">Specification</dt>
<dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
<dt style="float: left; text-align: right; width: 120px;">Interface</dt>
<dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
<dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
<dd style="margin: 0 0 0 120px;">Yes</dd>
<dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
<dd style="margin: 0 0 0 120px;">No</dd>
<dt style="float: left; text-align: right; width: 120px;">Target</dt>
<dd style="margin: 0 0 0 120px;">defaultView</dd>
<dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
<dd style="margin: 0 0 0 120px;">None</dd>
</dl>
<h2 id="Properties">Properties</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>The browsing context (<code>window</code>).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>The type of event.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event normally bubbles or not.</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>{{jsxref("Boolean")}}</td>
<td>Whether the event is cancellable or not.</td>
</tr>
<tr>
<td><code>state</code> {{readonlyInline}}</td>
<td><em>any</em></td>
<td>The current history entry's state object (if any).</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2")}}</td>
<td>10.0 [3]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}[1]</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>3.0[2]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("2")}}</td>
<td>10.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}[1]</td>
</tr>
</tbody>
</table>
</div>
<p>[1] The implementation has limited support.</p>
<p>[2] The implementation in Android 2.2 and 2.3 was buggy.</p>
<p>[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/">bug report</a>.</p>
<h2 id="Example">Example</h2>
<p>A page at <code>http://example.com/example.html</code> running the following code will generate logs as indicated:</p>
<pre class="brush: js">window.onpopstate = function(event) {
console.log("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(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
</pre>
<p>Note that even though the original history entry (for <code>http://example.com/example.html</code>) has no state object associated with it, a <code>popstate</code> event is still fired when we activate that entry after the second call to <code>history.back()</code>.</p>
<h2 id="Related_Events">Related Events</h2>
<ul>
<li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
</ul>
<h2 id="See_Also">See Also</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">Manipulating the browser history (the History API) </a></li>
</ul>
|
