Window: pageshow イベント

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 Standard
# event-pageshow

ブラウザーの互換性

BCD tables only load in the browser

関連情報