WindowEventHandlers.onbeforeunload

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

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

構文

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };

ふつうは、 window.addEventListener() および beforeunload イベントを使用したほうが onbeforeunload を使用するよりも適切です。

例

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

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

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

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

仕様書

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

仕様書	状態	備考
HTML Living Standard onbeforeunload の定義	現行の標準
HTML 5.1 GlobalEventHandlers の定義	勧告
HTML5 GlobalEventHandlers の定義	勧告

ブラウザーの対応

No compatibility data found for api.WindowEventHandlers.onbeforeunload.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

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

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

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

ブラウザーによっては、このイベント内での window.alert(), window.confirm(), window.prompt() の呼び出しは無視される可能性があります。詳しくは HTML 仕様書を参照して下さい。

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