Window: pagehide イベント

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("pagehide", (event) => { })

onpagehide = (event) => { }

イベント型

PageTransitionEvent です。 Event を継承しています。

イベントプロパティ

PageTransitionEvent.persisted 読取専用

この文書がキャッシュから読み込まれていることを示します。

イベントハンドラーの別名

Window インターフェイスに加え、イベントハンドラープロパティ onpagehide は、以下のターゲットでも利用可能です。

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

使用上の注意

unload や beforeunload イベントと同様に、このイベントはブラウザーによって確実に発生するとは限りません。特にモバイル端末ではその傾向が顕著です。例えば、次のような状況では、pagehide イベントはまったく発生しません。

1. モバイルユーザーがページにアクセスします。
2. その後、ユーザーが別のアプリに切り替えます。
3. その後、ユーザーがアプリマネージャーからブラウザーを閉じます。

ただし、unload や beforeunload イベントとは異なり、このイベントはバックフォワードキャッシュ (bfcache) と互換性があるため、このイベントにリスナーを追加しても、ページが bfcache に含まれるのを防ぐことはできません。

ユーザーのセッション終了を通知するのに最適なイベントは、visibilitychange イベントです。visibilitychange を対応していないブラウザーでは、pagehide イベントが次善の選択肢となります。

特に、ページのアンロードイベントを検知したい場合は、pagehide イベントが最適です。

このイベントがページライフサイクル内の他のイベントとどのように関連しているかについては、Page Lifecycle API のガイドをご覧ください。

例

この例では、イベントハンドラーが pagehide イベントを監視するために確立され、ページが再利用できるように保存されようとするときに特殊な扱いを行います。

window.addEventListener("pagehide", (event) => {
  if (event.persisted) {
    /* このページは破棄されないので、後で再利用することができます */
  }
});

これは onpagehide イベントハンドラープロパティを Window 上で利用することで書くこともできます。

window.onpagehide = (event) => {
  if (event.persisted) {
    /* このページは破棄されないので、後で再利用することができます */
  }
};

仕様書

ブラウザーの互換性

関連情報

• pageshow イベント
• Page Lifecycle API^（英語） では、ウェブアプリケーションにおけるページのライフサイクル動作の処理に関する最善の手法を紹介しています。
• PageLifecycle.js: ページのライフサイクル動作におけるブラウザー間の不整合に対処する JavaScript ライブラリーです。
• Back/forward cache^（英語） では、バックフォワードキャッシュとは何か、およびページのライフサイクルにおけるさまざまなイベントに対するその影響について解説しています。