Window: beforeunload イベント

beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。

バブリング なし
キャンセル
インターフェイス Event
イベントハンドラー onbeforeunload

このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。

仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの preventDefault() を呼び出すことになっています。

しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。

  • イベントの returnValue プロパティに文字列を代入する
  • イベントハンドラーから文字列を返す

一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。

望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 beforeunload のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。

イベントハンドラー/リスナーを window またはdocumentbeforeunload イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば Firefox の Back-Forward キャッシュWebKit のページキャッシュなどを使用することを防ぎます。

HTML 仕様書は window.alert(), window.confirm(), window.prompt() などのメソッドが、このイベントの実行中には無視されることがあることを示しています。詳しくは、 HTML 仕様書をご覧ください。

HTML の仕様では、 Event.returnValue を使用する代わりに Event.preventDefault() メソッドを使用する必要があります。ただし、これはすべてのブラウザーで対応しているわけではありません。

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

仕様書

仕様書 状態 備考
HTML Living Standard
beforeunload の定義
現行の標準
HTML5
beforeunload の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
beforeunload eventChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 4Opera 完全対応 12Safari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera 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 ?
Activation using event.returnValue = "string";
非推奨
Chrome 完全対応 30Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?
Activation using event.preventDefault()Chrome 未対応 なしEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 9Opera 未対応 なしSafari 完全対応 11WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
Activation using return "string";
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 12Safari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?

凡例

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

関連情報