---
title: 'Window: pageshow イベント'
slug: Web/API/Window/pageshow_event
tags:
  - API
  - Document
  - Event
  - History
  - Navigation
  - Page
  - PageTransitionEvent
  - Reference
  - Window
  - pageshow
  - show
  - イベント
  - ナビゲーション
  - ページ
  - 履歴
translation_of: Web/API/Window/pageshow_event
---
<div>{{APIRef("HTML DOM")}}</div>

<p><span class="seoSummary"><strong><code>pageshow</code></strong> イベントは、操作によってブラウザーがウィンドウの文書を表示したときに {{domxref("Window")}} へ送られます。</span>これには以下のようなものがあります。</p>

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

<div class="blockIndicator note">
<p>最初にページを読み込んでいる間、 <code>pageshow</code> イベントは {{domxref("Window/load_event", "load")}} イベントの<em>後で</em>発生します。</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">バブリング</th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">キャンセル</th>
   <td>不可</td>
  </tr>
  <tr>
   <th scope="row">インターフェイス</th>
   <td>{{domxref("PageTransitionEvent")}}</td>
  </tr>
  <tr>
   <th scope="row">イベントハンドラープロパティ</th>
   <td>{{domxref("Window.onpageshow", "onpageshow")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples" name="Examples">例</h2>

<p>この例は配列 <code>events</code> の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである <code>eventLogger()</code> は、発生したイベントの種類と、 {{domxref("PageTransitionEvent.persisted", "persisted")}} フラグの値を <code>pageshow</code> および <code>pagehide</code> イベントの場合に含めてコンソールに出力します。</p>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">const events = [
  "pagehide", "pageshow",
  "unload", "load"
];

const eventLogger = event =&gt; {
  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 =&gt;
  window.addEventListener(eventName, eventLogger)
);</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;コンソールを開き、このページに出入りしたときの出力を見てください。
このタブに新しいページを読み込んだり、履歴で前後に移動したりして、
イベントのログへの出力を見てください。&lt;/p&gt;
</pre>

<h3 id="Results" name="Results">結果</h3>

<p>{{EmbedLiveSample("Example", 640, 250)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>初回定義</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.Window.pageshow_event")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{domxref("Window.onpageshow", "onpageshow")}} イベントハンドラープロパティ</li>
 <li>{{domxref("Window.pagehide_event", "pagehide")}}</li>
</ul>