More than 3 years have passed since last update.

【JavaScript】編集内容が消えて困るページに離脱前の確認をはさむ

Last updated at 2020-02-10Posted at 2020-02-10

Web ページで何かを編集していて、間違ってブラウザバックしてしまったりタブを閉じてしまうと「あっ」てなりますよね。こんなとき、いくつかのサイトでは以下のような確認ダイアログが出てきて救われることがあります（Qiita の投稿画面でも出てきますね）。

この実装方法を紹介します。

コード

離脱前に確認ダイアログを出したいページに、以下の JavaScript を置いてください。

window.addEventListener('beforeunload', function (event) {
  event.preventDefault() // (1)
  event.returnValue = '' // (2)
})

コードを見るとわかりますが、表示するメッセージを指定している部分はありません。確認ダイアログのメッセージは、ブラウザ標準の固定メッセージから変更できないため注意してください¹。

window の beforeunload のイベントリスナを設定しています。このイベントリスナで_特定の操作_をすると、のスクショのような確認ダイアログを出せます。「特定の操作」というのは、以下のどちらかです:

(1) **イベントオブジェクトの preventDefault メソッドを呼ぶ。**HTML の仕様ではこちらが正当らしいが、すべてのブラウザではサポートされていないらしい（参考文献[1]参照）。
(2) イベントオブジェクトの returnValue 属性に文字列をセットする。文字列は何でも良い（この例では空文字列に設定）。

上記のコードでは、いろいろなブラウザに対応するため両方の操作をやっています。

なお、この操作を行ったとしても、本当にダイアログが出るかどうかはブラウザに任せられているようです。たとえば Chrome では、フォームの入力値を変更していない場合はダイアログが出ませんでした。濫用を防ぐためでしょう。

参考文献[2]に詳しいですが、かつてはイベントリスナの戻り値やreturnValueの設定値が確認ダイアログのメッセージとして使われるブラウザもあったようです。(2)のパターンで確認ダイアログが出る実装になっているのはその名残のようですね。 ↩