JavaScript、jQuery、onbeforeunloadイベントと独自の確認ダイアログ
JavaScript、jQuery、onbeforeunloadイベントと独自の確認ダイアログ
onbeforeunload イベントは、ユーザーがページを離れる前に発生するイベントです。このイベントハンドラを使用すると、ユーザーに確認ダイアログを表示して、ページを離れることを確認することができます。
しかし、デフォルトの確認ダイアログはブラウザによって異なり、カスタマイズが難しい場合があります。そこで、jQueryを使用して独自の確認ダイアログを表示し、デフォルトのダイアログを置き換える方法を紹介します。
コード解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onbeforeunloadイベントと独自の確認ダイアログ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>ページ遷移確認</h1>
<p>このページから移動しますか？</p>
<button id="btn-leave">はい</button>
<button id="btn-stay">いいえ</button>
<script>
$(document).ready(function() {
// onbeforeunloadイベントハンドラを設定
$(window).on('beforeunload', function(event) {
// ダイアログを表示
var dialog = $('<div>').attr('id', 'dialog').addClass('dialog');
dialog.append('<h2>ページ遷移確認</h2>');
dialog.append('<p>このページから移動しますか？</p>');
dialog.append('<button id="btn-dialog-leave">はい</button>');
dialog.append('<button id="btn-dialog-stay">いいえ</button>');
dialog.appendTo('body');
// ダイアログのボタンイベントを設定
$('#btn-dialog-leave').click(function() {
// ダイアログを閉じる
dialog.remove();
// ページ遷移を許可
return undefined;
});
$('#btn-dialog-stay').click(function() {
// ダイアログを閉じる
dialog.remove();
// ページ遷移をキャンセル
event.preventDefault();
return false;
});
// ダイアログを表示する
dialog.show();
// デフォルトの確認ダイアログを抑制
return false;
});
});
</script>
</body>
</html>
解説
onbeforeunloadイベントハンドラを設定します。- ダイアログ要素を作成し、
body要素に追加します。 - ダイアログ内のボタンにイベントを設定します。
- "はい" ボタンをクリックすると、ダイアログを閉じてページ遷移を許可します。
return false;を返すことで、デフォルトの確認ダイアログを抑制します。
ポイント
onbeforeunloadイベントハンドラは、必ずwindowオブジェクトに対して設定する必要があります。- ダイアログ要素は、
position: fixed;を使用して画面中央に表示するなど、スタイルを設定することができます。 - デフォルトの確認ダイアログを抑制するには、
event.preventDefault();とreturn false;を両方とも呼び出す必要があります。
- ダイアログのデザイン
サンプルコードでは、シンプルなダイアログを表示しています。デザインは必要に応じて変更してください。
- ボタンの機能
サンプルコードでは、"はい" ボタンはページ遷移を許可し、"いいえ" ボタンはページ遷移をキャンセルします。ボタンの機能は必要に応じて変更してください。
- イベントハンドラの追加
サンプルコードでは、onbeforeunload イベントハンドラのみ設定しています。必要に応じて、他のイベントハンドラを追加してください。
- ブラウザの互換性
onbeforeunload イベントは、すべてのブラウザでサポートされています。ただし、ブラウザによっては、デフォルトの確認ダイアログの抑制方法が異なる場合があります。
サンプルコードは自由にご利用ください。コードをコピーして、ご自身のプロジェクトに組み込んでください。
onbeforeunload イベントと独自の確認ダイアログを表示する他の方法
JavaScript の confirm() メソッドを使用する
confirm() メソッドは、ユーザーに確認メッセージを表示し、OK または キャンセル ボタンをクリックさせることができます。
$(window).on('beforeunload', function(event) {
if (!confirm('このページから移動しますか？')) {
event.preventDefault();
return false;
}
});
jQuery UI の dialog ウィジェットは、さまざまなスタイルのダイアログボックスを作成することができます。
$(window).on('beforeunload', function(event) {
var dialog = $('<div>').dialog({
title: 'ページ遷移確認',
modal: true,
buttons: {
'はい': function() {
$(this).dialog('close');
return undefined;
},
'いいえ': function() {
$(this).dialog('close');
event.preventDefault();
return false;
}
}
});
});
SweetAlert2 ライブラリを使用する
SweetAlert2 は、さまざまな種類のメッセージボックスを表示できるライブラリです。
$(window).on('beforeunload', function(event) {
Swal.fire({
title: 'ページ遷移確認',
text: 'このページから移動しますか？',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
}).then(function(result) {
if (result.value) {
return undefined;
} else {
event.preventDefault();
return false;
}
});
});
javascript jquery onbeforeunload
