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
156
157
158
|
---
title: popstate
slug: Web/API/Window/popstate_event
tags:
- popstate
translation_of: Web/API/Window/popstate_event
---
<p>当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。</p>
<p><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">需要注意的是调用<code>history.pushState()</code>或</span></font><code>history.replaceState()</code>不会触发<code>popstate</code>事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用<code>history.back()</code>或者<code>history.forward()</code>方法）</p>
<p><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">不同的浏览器在加载页面时处理<code>popstate</code>事件的形式存在差异。页面加载时Chrome和Safari通常会触发(</span></font>emit <font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">)<code>popstate</code>事件，但Firefox则不会。</span></font></p>
<h2 id="常规信息">常规信息</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;">是</dd>
<dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
<dd style="margin: 0 0 0 120px;">否</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;">无</dd>
</dl>
<h2 id="属性">属性</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="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>Yes</td>
<td>{{ CompatGeckoDesktop("2") }}</td>
<td>10.0</td>
<td>Yes</td>
<td>limited</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</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 (buggy in 2.2 and 2.3)</td>
<td>{{ CompatGeckoMobile("2") }}</td>
<td>10.0</td>
<td>Yes</td>
<td>limited</td>
</tr>
</tbody>
</table>
</div>
<h2 id="示例">示例</h2>
<p> 打开<code>http://example.com/example.html页面运行以下代码，</code> 会按预期那样打出log提示。</p>
<pre><code>window.addEventListener('popstate', (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}</code></pre>
<p>使用<code>onpopstate</code>事件处理程序属性的相同示例：</p>
<pre><code>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}</code></pre>
<p>注意，虽然原始的历史项（<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">http://example.com/example.html所对应的</code><span style="line-height: 1.5;">）没有关联的状态对象（state object），但稍后调用<code>history.back()激活该历史项时，仍会触发popstate事件。</code></span></p>
<h2 id="相关事件">相关事件</h2>
<ul>
<li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
</ul>
<h2 id="也可以看看">也可以看看</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>
|
