window.onbeforeunload

概要

WindowEventHandlers.onbeforeunload というイベントハンドラーのプロパティはbeforeunload が送られるときに、実行コードを含められます。このイベントが windowのリソースがまさにunloadする時、実行します。この時まだdocument(Webページ)はそのまま見えて残っている状態で、イベントがキャンセル可能な状態です。 

Note:意図しないポップアップと格闘する前に。ブラウザはbeforeunload event handlerを使っても、インタラクトがある動的なページや全くそのようなページでなくともダイアログを表示しないかもしれません。細かいブラウザの仕様は、後述の "ブラウザ実装状況"の節を確認してください。

構文

window.onbeforeunload = funcRef
  • funcRefは関数への参照、または関数式
  • 関数で イベントのreturnValue プロパティに 戻り値と同じ文字列を設定しなければいけません。 

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

注記

このイベントが nullやundefined以外の値を返す場合、ユーザにページのアンロードを確認するためのプロンプトが表示されます。いくつかのブラウザでは、イベントの戻り値がこのダイアログに表示されます。Firefox 4, Chrome 51, Opera 38 and 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 Platform Status.

2011 年 5 月 25 日より HTML5 仕様書 に、このイベントの発生中に window.showModalDialog()window.alert()window.confirm()window.prompt() への呼び出しが無視されるという旨の記述がなされています。

また、多様なブラウザはイベントの結果を無視し、ユーザに確認しないこともあります。そしてdocumentはいつも自動的にunloadされます。例えばFirefoxはabout:configからdom.disable_beforeunloadでこの振る舞いに変更できます。

window.onbeforeunload でなく window.addEventListener()beforeunload イベント を用いるべきです。 詳しい情報はそちらで手に入れられます。

このイベントにバインディングすると、内容がjavascriptで描画されるケースでブラウザがフルキャッシュすることを防ぎます。ある状況下でページに戻っても、データを設定するjavascriptが実行されるようなページで、javascriptが走らないことに気づくでしょう。(訳注:ここからは、beforeunloadイベント上にバインディングしたjavascriptの処理だと思われる(カンマがないので文の切れ目は想像で補完し、直訳風にした))もしwindow.onbeforeunload がバインドされ (つまりそのページから立ち去るとき実行される)、このページの javascriptは再度ページに戻ると実行され、そのため内容は更新されます。

仕様

このイベントは最初に Microsoft Internet Explorer 4 で導入され、HTML5 仕様で標準化されました。

仕様 ステータス コメント
WHATWG HTML Living Standard
GlobalEventHandlers の定義
現行の標準  
HTML 5.1
GlobalEventHandlers の定義
勧告  
HTML5
GlobalEventHandlers の定義
勧告  

ブラウザ実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
ベーシックサポート 1.0 (有) 1 4 12 3
カスタムtextの アンサポート 51.0 未サポート 44.0 (44.0)   38 9.1
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
ベーシックサポート ? (有) (有) ? ? ? (no) defect (有)
カスタムtextの アンサポート ? 51.0 未サポート 44.0 (44.0)       51.0
 

 

関連情報

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

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