Webページでページを離脱しようとしている時、アラートが表示されるサイトを見たことありませんか？
この機能を実装することで、もしかしたらページの離脱を思いとどまらせることが出来るかもしれません。

この機能はjQueryで簡単に実装することが出来ます。この記事ではその実装方法をご紹介したいと思います。

ページ離脱やブラウザを閉じる前にアラートを出す方法

jQueryを使ってページ離脱やブラウザを閉じる前にアラートを出す方法はこちら。

$(window).on('beforeunload', function(){
    return 'ページを閉じてもよろしいですか？';
});

この場合は、ページ移動、ブラウザを閉じる場合など全ての動作に対してアラートが出ます。
ただし、ブラウザによってはアラート文章は定型文が表示されるようです。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

注意点

この機能を実装する際の注意点としてtarget="_blank"を設定している場合は、アラートを出すことが出来ないということです。

以下がそのサンプルです。
この場合は、アラートが出ることなく、別タブが開いてしまいますね。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

別タブで開いた後のページを閉じようとするとアラートが出ますね。

ページ移動する時にアラートを出す

ページ移動しようとした時だけアラートを出す場合はこちら。

$(document).ready(function() {
    // リンクをクリックした際のアラート
    $('a').on('click', function(event) {
        var confirmLeave = confirm('このリンクをクリックするとページを離れます。よろしいですか？');
        if (!confirmLeave) {
            event.preventDefault();
        }
    });
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

この場合はtarget="_blank"を設定していてもアラートは出ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

送信ボタンを押した時にアラートを出す

送信ボタン（submit）しようとした時だけアラートを出す場合はこちら。

$(document).ready(function() {
    $('form').on('submit', function(event) {
        var confirmSubmit = confirm('フォームを送信してもよろしいですか？');
        if (!confirmSubmit) {
            event.preventDefault();
        }
    });
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
Webページでは、ユーザーにページを離れてほしくないことがありますよね。
ページを離れる前にアラートを表示することで、再度確認の機会を与えるのは有効な手段ですね。