---
title: WindowEventHandlers.onbeforeunload
slug: Web/API/WindowEventHandlers/onbeforeunload
tags:
  - API
  - DOM
  - Event Handler
  - Property
  - Reference
  - Window
  - イベントハンドラー
  - プロパティ
translation_of: Web/API/WindowEventHandlers/onbeforeunload
---
<div>{{APIRef("HTML DOM")}}</div>

<p><code><strong>onbeforeunload</strong></code> は {{domxref("WindowEventHandlers")}} ミックスインのプロパティで、 {{event("beforeunload")}} イベントを処理する {{event("Event_handlers", "event handler")}} です。このイベントはウィンドウでリソースを {{event("unload")}} しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャンセル可能な状態です。</p>

<div class="note">
<p><strong>メモ:</strong> ブラウザーによっては不要なポップアップを防ぐために、ページで操作が行われない限り、 <code>beforeunload</code> イベントハンドラーの中で作られたプロンプトを表示しないことがあります。さらに、ブラウザーによっては全く表示しないかもしれません。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox">window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };</pre>

<p>ふつうは、 {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} および {{event("beforeunload")}} イベントを使用したほうが <code>onbeforeunload</code> を使用するよりも適切です。</p>

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

<p>この例では、ページの終了前にユーザーに確認を取ります。</p>

<p>HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。</p>

<pre class="brush:js">window.addEventListener('beforeunload', function (e) {
  // イベントをキャンセルする
  e.preventDefault();
  // Chrome では returnValue を設定する必要がある
  e.returnValue = '';
});
</pre>

<h2 id="Notes" name="Notes">メモ</h2>

<p>ページが JavaScript を使用してコンテンツを表示している場合、ページを離れて元に戻ったときに JavaScript が停止することがあります。 <code>window.onbeforeunload</code> をバインドすることで、ブラウザーがページを完全にキャッシュすることを防ぐことができます。そうすると、ページ内の JavaScript は、次回の訪問時に起動され、必要に応じてコンテンツを更新します。</p>

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

<p>このイベントは最初に Microsoft Internet Explorer 4 で導入され、HTML5 仕様で標準化されました。</p>

<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', '#handler-window-onbeforeunload', 'onbeforeunload')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("api.WindowEventHandlers.onbeforeunload")}}</p>

<p>HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。</p>

<p>このイベントが <code>null</code> でも <code>undefined</code> でもない値を返した場合 (または <code>returnValue</code> プロパティに設定した場合)、ユーザーに対してページが終了することの確認が行われます。古いブラウザーでは、イベントの返値がダイアログに表示されます。 Firefox 44, Chrome 51, Opera 38, Safari 9.1 以降では、次のように、文字列の返値ではなく、ウェブページからは制御できない一般化された文字列が表示されます。</p>

<ul>
 <li>例えば、 Firefox では "This page is asking you to confirm that you want to leave - data you have entered may not be saved." (このページが本当にページから離れるかどうかを確認しています。 - 入力されたデータは保存されない可能性があります) という文字列が表示されます ({{bug("588292")}} を参照)。</li>
 <li>Chrome では "Do you want to leave this site? Changes you made may not be saved" (サイトを離れますか？変更が保存されない可能性があります) という文字列が表示されます (<a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a> を参照)。</li>
</ul>

<p>Internet Explorer は <code>null</code> の返値を尊重せず、テキストとして "null" をユーザーに表示します。プロンプトをスキップするには、 <code>undefined</code> を使用する必要があります。</p>

<p>ブラウザーによっては、このイベント内での {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} の呼び出しは無視される可能性があります。詳しくは <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">HTML 仕様書</a>を参照して下さい。</p>

<p>また、様々なブラウザーがイベントの結果を無視し、ユーザーにまったく確認を取らないことがあります。このような場合、文書は常に自動的にアンロードされます。 Firefox では <a>about:config</a> の中に <code>dom.disable_beforeunload</code> という名前のスイッチがあり、この動作を有効にすることができます。Chrome 60 時点では、フレームまたはページが読み込まれてからユーザーが何も操作を行っていない場合、確認は行われません。</p>