WindowEventHandlers.onbeforeunload イベントハンドラープロパティは、 beforeunload が送られるときに実行されるコードを含みます。このイベントはウィンドウでリソースを unload しようとするときに発火します。文書はまだ表示されており、イベントはキャンセル可能な状態です。

メモ: 望まないポップアップと戦うために、ブラウザーによっては beforeunload イベントハンドラーの中で作られたプロンプトを、ページで操作が行われない限り表示しないことがあります。ブラウザーによっては全く表示しないかもしれません。具体的なブラウザーのリストは、ブラウザーの対応の節を参照してください。

構文

window.onbeforeunload = funcRef
  • funcRef は関数への参照、または関数式です。
  • 関数は Event オブジェクトの returnValue プロパティに文字列の値を割り当て、同じ文字列を返すようにしてください。
  • ただし Event.returnValue は非推奨なので、ブラウザーが確認ダイアログを表示することを防ぐには、 return '' で十分でしょう。

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

Event.returnValue は非推奨なので、以下の例が主要なブラウザーのほとんどでテストできます。

window.onbeforeunload = function(e) {
  e.preventDefault(); 
  return '';
};

メモ

このイベントが 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 を使用する必要があります。

2011年5月25日より、 HTML5 仕様書では window.alert(), window.confirm(), window.prompt() メソッドがこのイベント内で無視される可能性があることを示しています。詳しくは HTML5 仕様書を参照して下さい。

また、様々なブラウザーがイベントの結果を無視し、ユーザーにまったく確認を取らないことがあります。文書は常に自動的にアンロードされます。 Firefox は about:config の中に dom.disable_beforeunload という名前のスイッチを持っており、この動作を有効にすることができます。

このイベントは、 window.addEventListener()beforeunload イベント を用いて処理することができ、またそうするべきです。詳しい情報はそちらで手に入れられます。

このイベントをバインドすることは、内容が Javascript で描画されるところで、ブラウザーがページを完全にキャッシュすることを防ぐために使用することができます。コンテンツを生成するために 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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 4Opera 完全対応 12Safari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android ? Opera Android 完全対応 ありSafari iOS 未対応 なし
補足
未対応 なし
補足
補足 Implementation seems defect.
Samsung Internet Android ?
Custom text support
非推奨非標準
Chrome 未対応 ? — 51Edge 未対応 なしFirefox 未対応 ? — 44IE 完全対応 ありOpera 未対応 ? — 38Safari 未対応 ? — 9WebView Android 未対応 ? — 51Chrome Android 未対応 ? — 51Edge Mobile 未対応 なしFirefox Android 未対応 ? — 44Opera Android 未対応 ? — 38Safari iOS ? Samsung Internet Android ?

凡例

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

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

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