このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Window: pageshow イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
pageshow イベントは、ブラウザーが新しい文書へナビゲーションによって移動したときに Window へ送られます。
これには以下のようなものがあります。
- 最初にページを読み込んだとき。
- 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき。
- モバイル OS で凍結されたページを復元したとき。
- ブラウザーの「進む」または「戻る」ボタンを使用してページに戻る(bfcache から復元された場合も含みます)。
- ページを背後のタブで開いたとき。
- ページがアクティブ化前に事前レンダリングされたとき。
警告:
名前と異なり、pageshow イベントは、ページが実際にユーザーに表示されたときに発生するわけではありません。例えば、ページが背後のタブで開かれたり、事前レンダリングされたりする場合があります。ページがユーザーに表示されたことに応答したい場合は、以下のイベントを使用してください。
pagereveal: ページが初めてレンダリングされた際に送られます。visibilitychange: ページの表示状態が変更されるたびに送られます。prerenderingchange: 事前レンダリングされたページがアクティブになった際に送られます。
メモ:
最初にページを読み込んでいる間、 pageshow イベントは load イベントの後で発生します。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("pageshow", (event) => { })
onpageshow = (event) => { }
イベント型
HashChangeEvent です。 Event を継承しています。
イベントプロパティ
PageTransitionEvent.persisted読取専用-
Indicates if the document is loading from a cache.
イベントハンドラーの別名
Window インターフェイスに加え、イベントハンドラープロパティ onpageshow は、以下のターゲットでも利用可能です。
例
この例は配列 events の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである eventLogger() は、発生したイベントの種類と、 persisted フラグの値を pageshow および pagehide イベントの場合に含めてコンソールに出力します。
JavaScript
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
<p>
コンソールを開き、このページに出入りしたときの出力を見てください。
このタブに新しいページを読み込んだり、履歴で前後に移動したりして、イベントのログへの出力を見てください。
</p>
結果
仕様書
| 仕様書 |
|---|
| HTML # event-pageshow |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。