blob: 482e1b567e278b8293e3080cd2f03008060f24a5 (
plain)
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
|
---
title: pageshow
slug: Web/API/Window/pageshow_event
translation_of: Web/API/Window/pageshow_event
original_slug: Web/Events/pageshow
---
<p>当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)</p>
<h2 id="基本信息">基本信息</h2>
<dl>
<dt style="float: left; text-align: right; width: 120px;">规范</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-pageshow">HTML5</a></dd>
<dt style="float: left; text-align: right; width: 120px;">接口</dt>
<dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
<dt style="float: left; text-align: right; width: 120px;">事件冒泡</dt>
<dd style="margin: 0 0 0 120px;">No</dd>
<dt style="float: left; text-align: right; width: 120px;">事件取消</dt>
<dd style="margin: 0 0 0 120px;">No</dd>
<dt style="float: left; text-align: right; width: 120px;">事件源</dt>
<dd style="margin: 0 0 0 120px;">Document (dispatched on Window)</dd>
<dt style="float: left; text-align: right; width: 120px;">默认操作</dt>
<dd style="margin: 0 0 0 120px;">None</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 event target (the topmost target in the DOM tree).</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>persisted</code> {{readonlyInline}}</td>
<td>{{jsxref("boolean")}}</td>
<td>表示网页是否是来自缓存.</td>
</tr>
</tbody>
</table>
<h2 id="示例">示例</h2>
<p>以下示例将会在控制台打印由前进/后退按钮以及load事件触发后引起的pageshow事件：</p>
<pre>window.addEventListener('pageshow', function(event) {
console.log('after , pageshow :',event);
});
window.addEventListener('load', function() {
console.log('before');
});
</pre>
<p>不规范的写法，你同样可以将这个事件当做一个属性添加到body标签，类似于onload</p>
<pre><body onload="myonload()" onpageshow="mypageshowcode()"></pre>
<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>{{CompatChrome("4")}}</td>
<td>{{CompatGeckoDesktop("1.8")}}</td>
<td>11</td>
<td>15</td>
<td>5</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>2.3</td>
<td>{{CompatUnknown()}}</td>
<td>11</td>
<td>35</td>
<td>5.1</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关事件">相关事件</h2>
<ul>
<li><a href="/en-US/docs/Mozilla_event_reference/pagehide"><code>pagehide</code></a></li>
<li><a href="/en-US/docs/Using_Firefox_1.5_caching#pageshow_event">Using Firefox 1.5 caching — pageshow event</a></li>
</ul>
|
