ブラウザの閉じるボタンに割り込む #JavaScript #JQuery

経緯

過去に、間違ってブラウザを閉じない為の対策の一つとして、調べた内容になります。

onbeforeunloadイベントを使う

onbeforeunloadイベントで、画面遷移の前に特定の処理を実行できるイベントです。

returnで、trueまたは文字列を返すと、ブラウザ標準の確認ダイアログが表示され、確認を促せます。

JQueryは.unload()イベントになります。

制約

名前の通り、画面がアンロードされる前に発火するイベントなので、基本的にすべての画面遷移で発火するイベントになります。

  1.  Aタグのlink、onclickに反応する
  2. window.location.hrefの書き換えに反応する
  3. formのsubmitでも反応する

用途として、閉じるボタンの対策だけではない・・・ということ。

対策

ボタンやハイパーリンクでは、onbeforeunloadイベントの警告をスキップし、

ブックマークでの移動や、URL変更、画面を閉じるなど、想定しない画面遷移のみ反応させる場合は、

一時的にフラグなどで、onbeforeunloadイベント内のチェック処理の有効・無効を切り替える必要がある。

影響

既存で大量に画面やボタンがあるアプリに全体的にこの処理を入れようと思うと、それなりに大変です。

新規アプリで、最初から設計思想として入れておくなどはありだと思う。

既存は、エラー画面だけとか、安易に閉じて欲しくない画面だけ対応とか、部分的な対応は有りだと思います。

コード

下記に、試しにコーディングしたソースと、コツを記載しています。
よろしければ、参考にしてください。

JQueryプラグイン

下記の様な閉じるボタンに割り込む、JQueryのプラグインを作りました。
有効・無効が簡単に切り替えられます。

よろしければ、ご利用ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です