Page transition events
PageTransitionEvent イベントオブジェクトは、文書が読み込まれるか、または終了する際に発行される pageshow および pagehide イベントのハンドラー内で使用できます。
Event PageTransitionEvent
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 1.5 | 5 | 18 | 4 | |
| PageTransitionEvent() コンストラクターは、新しい PageTransitionEvent オブジェクトを生成します。これは、ページが読み込まれたり、読み込まれなかったりする際に window オブジェクトで発行される Window/pageshowevent または Window/pagehideevent イベントで使用します。 | 16 | 79 | 11 | 6 | 18 | 6 |
| persisted は読み取り専用プロパティで、ウェブページがキャッシュから読み込まれていることを示します。 | 4 | 12 | 11 | 5 | 18 | 4 |
| pagehide イベントは、ブラウザーがセッションの履歴から他のページを表示する過程において、現在のページを非表示にしたときに Window へ送られます。 | 3 | 12 | 6 | 5 | 18 | 4.2 |
| pageshow イベントは、ブラウザーが新しい文書へナビゲーションによって移動したときに Window へ送られます。 | 3 | 12 | 6 | 5 | 18 | 4.2 |
基本構文
JAVASCRIPT
window.addEventListener("pageshow", (event) => {
if (event.persisted) {
alert("The page was cached by the browser");
} else {
alert("The page was NOT cached by the browser");
}
});実務での使いどころ
-
Page transition events の活用
PageTransitionEvent イベントオブジェクトは、文書が読み込まれるか、または終了する際に発行される pageshow および pagehide イベントのハンドラー内で使用できます。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。