Window: pageshow イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
pageshow イベントは、操作によってブラウザーがウィンドウの文書を表示したときに Window へ送られます。これには以下のようなものがあります。
- 最初にページを読み込んだとき
- 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
- モバイル OS で凍結されたページを復元したとき
- ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき
メモ:
最初にページを読み込んでいる間、 pageshow イベントは load イベントの後で発生します。
| バブリング | なし |
|---|---|
| キャンセル | 不可 |
| インターフェイス | PageTransitionEvent |
| イベントハンドラープロパティ | onpageshow |
例
この例は配列 events の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである eventLogger() は、発生したイベントの種類と、 persisted フラグの値を pageshow および pagehide イベントの場合に含めてコンソールに出力します。
JavaScript
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));
HTML
html
<p>
コンソールを開き、このページに出入りしたときの出力を見てください。
このタブに新しいページを読み込んだり、履歴で前後に移動したりして、
イベントのログへの出力を見てください。
</p>
結果
仕様書
| Specification |
|---|
| HTML # event-pageshow |
ブラウザーの互換性
Loading…
関連情報
onpageshowイベントハンドラープロパティpagehide