JavaScriptでページ遷移の前にメッセージを表示する方法！

JavaScriptでユーザーがページ遷移の操作を行う際に確認ダイアログなどでメッセージを送信したい場合があります。

例えば入力フォームで、入力途中の状態で確定ボタンを押さずに

• 前のページに戻る
• ページのリロード（更新）をする
• ページ・ブラウザを閉じる

まずは普通にユーザーがリンクをクリックしたり、前に戻るボタンを押した時に確認ダイアログでメッセージを表示させるサンプルコードです。

上記のサンプルコードのプレビューのリンクをクリックすると「他のページに移動しますか？」という確認ダイアログが表示されるかと思います。

JavaScriptでbeforeunloadのイベントにaddEventListenerを使って関数を設定して、その関数の中でまずe.preventDefault()でイベントの処理をキャンセル（ページ遷移をキャンセル）しています。

更にe.returnValue()に確認ダイアログに渡すメッセージを渡すことで、確認ダイアログで同意したユーザーだけページ遷移させる（それ以外は現在のページを表示し続ける）といった制御が可能になります。

次にフォームでユーザーが情報を入力している時に他のページに遷移させないように確認ダイアログでメッセージを表示する方法です。

他のページへの遷移や、リロードなどは確認ダイアログは表示するが、確定ボタン（submit）では出さないというのがポイントです。

ではサンプルコードを見てみましょう。

上記のサンプルコードでは「他のページに移動する」のリンクの場合や、何かフォームに情報を入力してページをリロードした場合には確認ダイアログが表示されます。

一方で「確定する」のフォームのsubmitの場合は確認ダイアログが表示されません。

プログラムの中で確認ダイアログの表示方法は前の同じやり方ですが、その処理をsubmit_flgを設けその値で条件分岐させています。

このsubmit_flgはフォームのsubmitイベント時にフラグをたてており、フラグが立っていると確認ダイアログが表示されなくなります。