編集画面からページを遷移するときに、「編集内容を破棄します。よろしいですか」という確認のダイアログボックスを出したい。

Question

タイトルのとおりです。
編集内容中に前のページに戻ってしまわないように、ダイアログボックスを表示して、
確認ができるようにしたいと考えています。
戻るボタンなどは無いのですが、どのようにすればよいのでしょうか。

Answer 1

onbeoreunloadイベントを使用します。

window.onbeforeunload = function () {
return "画面を切り替えてもいいですか？";
}

またはjQueryを使用されているのでしたら、以下のようにします。

$(window).on('beforeunload', function(e) {
return "画面を切り替えてもいいですか？";
});

ちなみにこの処理は「画面を変更したイベント」を検知しているため、たとえば編集内容を送信して、確認画面に遷移するようなケースにも適用されてしまいます。
これを回避するには、jQueryであれば、以下のようにします。

$("input[type=submit]").click(function() {
$(window).off('beforeunload');
});

jquery画使用できない環境の場合は、プログラムの中で判断するしかなさそうです。