WindowEventHandlers.onbeforeunload

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

メモ: ブラウザーによっては不要なポップアップを防ぐために、ページで操作が行われない限り、 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 の定義
勧告

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onbeforeunloadChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 12Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Custom text support
非推奨非標準
Chrome 未対応 ? — 51Edge 未対応 なしFirefox 未対応 ? — 44IE 完全対応 ありOpera 未対応 ? — 38Safari 未対応 ? — 9WebView Android 未対応 ? — 51Chrome Android 未対応 ? — 51Firefox Android 未対応 ? — 44Opera Android 未対応 ? — 41Safari iOS 未対応 なしSamsung Internet Android 未対応 ? — 5.0

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

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

このイベントが 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 時点では、フレームまたはページが読み込まれてからユーザーが何も操作を行っていない場合、確認は行われません。