注意:このページで「ウィンドウを閉じるときに任意のメッセージを設定したダイアログを表示する」方法はわかりません。
- 動作確認した環境
- MacOS Mojave 10.14.6
- Google Chrome 78.0
- Fire Fox 70.0
- Safari 13.0
やりたいこと
ブラウザにおいてユーザが[x]ボタンやCtrl + Wでウィンドウを閉じる時に任意のメッセージを表示した[OK][キャンセル]ボタンがあるダイアログを表示したい。
ボタンのイベントでは似たようなことがよくあるので難しいと思っていなかった・・・。
サイト側でウィンドウを閉じられなくするなんてセキュリティ的に問題になるよね、ってことに気がつくのが遅かったのです。
MacのChrome
/** [閉じる]ボタン押下処理. */
function onClickClose() {
let result = confirm('本当に閉じていいの？');
if (result) {
window.close();
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>ウィンドウを閉じるときにメッセージダイアログを表示したい</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>
<script src="sample.js"></script>
</head>
<body>
<table>
<tr><td>入力欄</td><td><input id="pasteArea" type="text"></td></tr>
<tr><td colspan="2"><input type="button" id="close" value="閉じる" onclick="onClickClose();"></td></tr>
</table>
</body>
</html>
ウィンドウを閉じるのは、beforeunloadイベントでキャッチできる
Window: beforeunload イベント - Web API | MDN
beforeunloadイベントではconfirm()が使えなかった
HTML 仕様書は window.alert(), window.confirm(), window.prompt() などのメソッドが、このイベントの実行中には無視されることがあることを示しています。
Window: beforeunload イベント - Web API | MDN
MacのFireFox
$(window).on('beforeunload', function(e) {
// ウィンドウを閉じる時にメッセージを表示する.
let result = confirm('本当に閉じていいの？');
return result;
});
イベントの返却値に任意のメッセージを設定してもダイアログには表示されない
MacのSafari
$(window).on('beforeunload', function(e) {
// ウィンドウを閉じる時にメッセージを表示する.
return '本当に閉じていいの？';
});
preventDefault()を呼び出したけれどダイアログには表示されない
仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの preventDefault() を呼び出すことになっています。
Window: beforeunload イベント - Web API | MDN
MacのChrome
$(window).on('beforeunload', function(e) {
e.preventDefault();
// ウィンドウを閉じる時にメッセージを表示する.
return '本当に閉じていいの？';
});
returnValueに任意のメッセージを設定してもダイアログには表示されない
MacのFireFox
$(window).on('beforeunload', function(e) {
e.preventDefault();
// ウィンドウを閉じる時にメッセージを表示する.
e.returnValue = '本当に閉じていいの？';
return '';
});
そもそも、IE以外のいろんなブラウザがカスタムメッセージへの対応をやめている
画像参照元 : Window: beforeunload イベント - Web API | MDN
自作のダイアログが使えるか試してみる
カスタムメッセージが表示できないのなら、自作のダイアログを表示できないかを試してみます。
jQuery UIでダイアログをとりあえず自作してみる
Dialog | jQuery UI 1.10 日本語リファレンス | js STUDIO
...省略...
$(window).on('load', function() {
createDialog();
});
/** 自作ダイアログを設定する. */
function createDialog() {
$('#mydialog').dialog({
title: '本当に閉じていいの？',
autoOpen: false,
modal: true,
height: 0,
width: 200,
closeText: 'x',
buttons: [
{text: '閉じない', click: function() {
$(this).dialog('close');
}}
]
});
}
/** 自作ダイアログ押下処理. */
function onClickMyClose() {
$('#mydialog').dialog('open');
}
...省略...
<tr><td colspan="2"><input type="button" id="close" value="閉じる" onclick="onClickClose();"></td></tr>
<!-- ↓ここを追加 -->
<tr><td colspan="2"><input type="button" id="myClose" value="自作ダイアログ" onclick="onClickMyClose();"></td></tr>
</table>
...省略...
ウィンドウを閉じるときに自作ダイアログを表示したがうまくいかなかった
ブラウザのダイアログが出てしまう
MacのFireFox
$(window).on('beforeunload', function(e) {
e.preventDefault();
// ウィンドウを閉じる時にメッセージを表示する.
$('#mydialog').dialog('open');
});
ブラウザのダイアログを出さないとウィンドウが閉じてしまう
MacのFireFox
$(window).on('beforeunload', function(e) {
// ウィンドウを閉じる時にメッセージを表示する.
$('#mydialog').dialog('open');
});
そもそも、ウィンドウを閉じるイベントをキャンセルする方法がわからない
たとえ、タイマーかななんかで自作ダイアログを表示できたとしても「ウィンドウを閉じるイベントをキャンセルする方法がわからない」という根本的な事に気がついた