Window: beforeunload イベント
beforeunload
イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。
バブリング | なし |
---|---|
キャンセル | 可 |
インターフェイス | Event |
イベントハンドラー | onbeforeunload |
このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。
仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの preventDefault()
を呼び出すことになっています。
しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。
- イベントの
returnValue
プロパティに文字列を代入する - イベントハンドラーから文字列を返す
一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。
望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 beforeunload
のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。
イベントハンドラー/リスナーを window
またはdocument
の beforeunload
イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば 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 = "";
});
仕様書
Specification |
---|
HTML Standard # event-beforeunload |
HTML Standard # handler-window-onbeforeunload |
ブラウザーの互換性
BCD tables only load in the browser