Window: pageshow イベント

pageshow イベントは、操作によってブラウザーがウィンドウの文書を表示したときに Window へ送られます。これには以下のようなものがあります。

  • 最初にページを読み込んだとき
  • 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
  • モバイル OS で凍結されたページを復元したとき
  • ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき

メモ: 最初にページを読み込んでいる間、 pageshow イベントは load イベントの後で発生します。

バブリング なし
キャンセル 不可
インターフェイス PageTransitionEvent
イベントハンドラープロパティ onpageshow

例

この例は配列 events の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである eventLogger() は、発生したイベントの種類と、 persisted (en-US) フラグの値を 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

関連情報