• HOME > 
  • JavaScript > 
  • JSでページ離脱時にメッセージを出す方法【beforeunl...

JSでページ離脱時にメッセージを出す方法【beforeunloadの使い方】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

beforeunloadとは?

Webサイトの入力フォームなどではユーザーがうっかり送信や保存をせずにページを離れてしまうことも想定されるので、他のページに移動する前にメッセージを出して注意を促すようにしておくとユーザビリティが高まります。

離脱時メッセージの例

JavaScriptのイベントであるbeforeunloadはそのようなページ離脱時に発火するイベントです。

beforeunloadの使い方

「beforeunload」はイベントのひとつなので、windowに対して「load」や「resize」などと同じようにaddEventListenerで設定を行います。

下記のように記述すれば、リンクによる遷移前やリロード、タブ・ブラウザを閉じる前にアラートを表示できます。

JavaScript

var onBeforeunloadHandler = function(e) {
    e.preventDefault();
    e.returnValue = '';
};
window.addEventListener('beforeunload', onBeforeunloadHandler, false); 

アラートのテキストは変更できない

beforeunloadについてネットの記事を調べるとe.returnValueでアラートに表示するテキストを自由に変更できるという内容をよく見かけますが、2024年現時点ではブラウザ側の仕様が変わり必ず固定のメッセージが表示されるようになっています。

Edgeでは「変更内容が保存されない可能性があります。」、Chromeでは「行った変更が保存されない可能性があります。」というように、仮にユーザーによる変更を伴わないページであっても共通のメッセージが表示されるので、若干使い勝手が悪く感じますが、プログラム側で自由にテキストを変えられると機能を悪用される恐れがあるので致し方ないと言えるでしょう。

ページ内で一度でもクリックされないとイベントが発火しない

beforeunloadはページ内のどこかしらがクリックされた後、遷移しようとしたタイミングでイベントが発火する仕様のようなので、仮にユーザーがページ内をスクロールしただけだとアラートは表示されません。

前述の固定メッセージからも読み取れるように、beforeunloadイベントはユーザーの入力を伴うページでの利用を想定しているため、クリックを感知しないと発動しない仕組みになっているようです。

window.onbeforeunloadについて

window.onloadのようにwindow.onbeforeunloadという書き方もできます。

ただし、こちらは後から書いたもので上書きされてしまう書き方なので、addEventListenerを使っておいた方が無難と言えるでしょう。

JavaScript

window.onbeforeunload = function(e){
    e.preventDefault();
    e.returnValue = '';
}

beforeunloadを解除する

続いては登録したbeforeunloadイベントを解除する方法です。

beforeunloadはページ遷移全てを対象にしてしまうため、例えば保存ボタンが押されても確認アラートが表示されます(保存しようとしているのに「保存されない恐れがある」というメッセージが出てしまいます)。

addEventListenerで追加したイベントは、対となるremoveEventListenerで取り除くことが可能です。

JavaScript

window.removeEventListener('beforeunload', onBeforeunloadHandler, false);

まとめ

以上がJSのbeforeunloadを使ってページ離脱時にメッセージを出す方法です。

離脱率改善の施策のひとつとしても導入してみてはいかがでしょうか?

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。