フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

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

jQuery
アラート
ページ離脱防止

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

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