Window: pageshow イベント

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

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

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

バブリング なし
キャンセル 不可
インターフェイス PageTransitionEvent
イベントハンドラープロパティ 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 Living Standard
pageshow の定義
現行の標準 初回定義
HTML5
pageshow の定義
勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
pageshow eventChrome ? Edge ? Firefox 完全対応 1.5IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報