現在のページを離脱する際にアラートで警告する方法 ( jQuery )

現在いるページから離れる際にアラートで確認する方法を紹介する。jQuery コードで実装する。

このページにも以下に紹介する jQuery コードを仕込んだので、試しにブラウザの戻るボタン・Back space (キーボード)・ページリロードなど試してみて下さい。(PC 版のみに実装)

どんなときに必要か?

「なんのために使うんだ?」と思う方もいるかもしれないので、筆者が役に立ったケースを言っておく。利便性が分かっている方は読み飛ばして下さい。

以前投稿フォームを作る事があり、入力ページ>確認ページ>完了ページという流れを 1 ページで完結する実装をした。

ページ遷移しないため、動作が軽くなって良かったのだが、確認ページから入力ページに戻る際にこちらで用意した「修正する」ボタンでなく、ブラウザの戻るボタンをクリックしてしまうケースが想定された。

注意書きをしていてもクリックする事があるだろうから、ページから離れようとする際にアラートを出すという対策が必要になった。

以上のケースのように、そのページを訪れるユーザにとってページを離れる事が不利益なケースに用いると良いだろう。

ページ離脱時のアラート jQuery で実装する方法

ページ離脱時のアラートには、 beforeunload イベントを用いれば良い。(この記事では紹介しないが、beforeunload イベントは JavaScript で用意されたイベントなので jQuery でなくても実装できる。ただ、記述が増えて面倒。)

以下にコードを記載する。

ページ離脱時のアラート実装 – jQuery

$(function(){
    $(window).on('beforeunload', function() {
        return "このページを離れると、入力したデータが削除されます。修正の場合には、「修正ボタン」をクリックしてください。";
    });
});

メッセージに改行を入れたい場合には、以下のように \n をつける。

ページ離脱時のアラート実装(改行する場合) – jQuery

$(function(){
    $(window).on('beforeunload', function() {
        return "このページを離れると、入力したデータが削除されます。\n修正の場合には、「修正ボタン」をクリックしてください。";
    });
});

実際のアラートは以下のようなもの。自分で設定した文言に加えて、それぞれのケースのデフォルトの文言が自動で設定される。

ページ離脱時のアラート確認(ブラウザ戻るボタン押下時)
ページ離脱時のアラート確認(ブラウザ戻るボタン押下時)

ページ離脱時のアラート確認(ページ再読み込み時)
ページ離脱時のアラート確認(ページ再読み込み時)

このページにも同様の jQuery コード仕込んだので、試しにブラウザの戻るボタン・Back space (キーボード)・ページリロードなど試してみて下さい。(PC 版のみに実装)

関連記事

jQueryの基本的な記述方法(セレクタと命令)
HTMLの読み込み後にjQueryのプログラムを実行する方法
ページのスクロールに対してサイドバーを固定する方法(jQuery、CSS)

“現在のページを離脱する際にアラートで警告する方法 ( jQuery )” への 4 件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.