お問合わせフォーム等でユーザーに入力してもらうようなシチュエーションで誤ってページを離れようとする時に離脱を防ぐアラートメッセージ表示の実装です。
beforeunloadを使用した基本のコード
JavaScriptのイベントbeforeunloadを使用します。
下記のコードで同タブでのページ遷移や再読み込み、タブを閉じるといったページ離脱の動作に対してアラートメッセージが表示されます。
const beforeUnloaded = e => {
e.preventDefault();
e.returnValue = '';
}
window.addEventListener('beforeunload', beforeUnloaded);3行目のreturnValueの値は空文字で設定しております。
現在ではメッセージを任意で設定してもブラウザごとのデフォルトのメッセージが表示されるような仕様のようです。
- 確認メッセージ例
特定のイベントに対して離脱メッセージが表示されないようにする場合
例えばフォームの送信ボタンのような離脱の際に確認メッセージを表示させたくない場合があると思います。
そういう時はremoveEventListenerを使用して送信ボタンクリック時にbeforeUnloaded関数を取り除く処理をすれば良いです。
<form>
<input type="submit" id="submit" value="submit">
</form>const beforeUnloaded = e => {
e.preventDefault();
e.returnValue = '';
}
window.addEventListener('beforeunload', beforeUnloaded);
document.getElementById('submit').addEventListener('click', () => {
// submit（送信）ボタンをクリックした時はアラート表示させない
window.removeEventListener('beforeunload', beforeUnloaded);
});まとめ
以上ページ離脱を防ぐ確認メッセージを表示させる方法ですが、実際はブラウザごとで対応が違っており、中には動作しないブラウザや端末（iOS?）もありますので確認の上での使用をおすすめします。
¥2,794 （2025/08/14 11:31時点 | Amazon調べ）
ポチップ