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 完全対応 ありFirefox 完全対応 1IE 完全対応 4Opera 完全対応 12Safari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
Custom text support
非推奨非標準
Chrome 未対応 ? — 51Edge 未対応 なしFirefox 未対応 ? — 44IE 完全対応 ありOpera 未対応 ? — 38Safari 未対応 ? — 9WebView Android 未対応 ? — 51Chrome Android 未対応 ? — 51Firefox Android 未対応 ? — 44Opera Android 未対応 ? — 41Safari iOS 未対応 なしSamsung Internet Android ?

凡例

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

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

ドキュメントのタグと貢献者

このページの貢献者: mogami74, mfuji09, mdnwebdocs-bot, naturallucky, teoli, khalid32, ethertank
最終更新者: mogami74,