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
|
---
title: 'Window: pageshow イベント'
slug: Web/API/Window/pageshow_event
tags:
- API
- Document
- Event
- History
- Navigation
- Page
- PageTransitionEvent
- Reference
- Window
- pageshow
- show
- イベント
- ナビゲーション
- ページ
- 履歴
translation_of: Web/API/Window/pageshow_event
---
<div>{{APIRef("HTML DOM")}}</div>
<p><span class="seoSummary"><strong><code>pageshow</code></strong> イベントは、操作によってブラウザーがウィンドウの文書を表示したときに {{domxref("Window")}} へ送られます。</span>これには以下のようなものがあります。</p>
<ul>
<li>最初にページを読み込んだとき</li>
<li>同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき</li>
<li>モバイル OS で凍結されたページを復元したとき</li>
<li>ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき</li>
</ul>
<div class="blockIndicator note">
<p>最初にページを読み込んでいる間、 <code>pageshow</code> イベントは {{domxref("Window/load_event", "load")}} イベントの<em>後で</em>発生します。</p>
</div>
<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>なし</td>
</tr>
<tr>
<th scope="row">キャンセル</th>
<td>不可</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{domxref("PageTransitionEvent")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>{{domxref("Window.onpageshow", "onpageshow")}}</td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">例</h2>
<p>この例は配列 <code>events</code> の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである <code>eventLogger()</code> は、発生したイベントの種類と、 {{domxref("PageTransitionEvent.persisted", "persisted")}} フラグの値を <code>pageshow</code> および <code>pagehide</code> イベントの場合に含めてコンソールに出力します。</p>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const events = [
"pagehide", "pageshow",
"unload", "load"
];
const eventLogger = event => {
switch (event.type) {
case "pagehide":
case "pageshow":
let isPersisted = event.persisted ? "persisted" : "not persisted";
console.log('Event:', event.type, '-', isPersisted);
break;
default:
console.log('Event:', event.type);
break;
}
};
events.forEach(eventName =>
window.addEventListener(eventName, eventLogger)
);</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>コンソールを開き、このページに出入りしたときの出力を見てください。
このタブに新しいページを読み込んだり、履歴で前後に移動したりして、
イベントのログへの出力を見てください。</p>
</pre>
<h3 id="Results" name="Results">結果</h3>
<p>{{EmbedLiveSample("Example", 640, 250)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>初回定義</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.Window.pageshow_event")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("Window.onpageshow", "onpageshow")}} イベントハンドラープロパティ</li>
<li>{{domxref("Window.pagehide_event", "pagehide")}}</li>
</ul>
|
