JavaScript で beforeunload イベントを使うと、ブラウザの閉じるボタンやリロード、他のページに遷移しようとしたときにアラートを表示することができます。
以下は、aタグリンクとsubmitボタンを配置しただけのHTMLです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>beforeunloadTest</title>
</head>
<body>
<form action="index.html" method="get">
<div>
<a href="index.html">link</a>
</div>
<div>
<input type="submit" id="mySubmit" value="submit">
</div>
</form>
<script src="main.js"></script>
</body>
</html>
以下のように、beforeunloadイベント発火時の処理とイベントの登録を実装します。
main.js
// beforeunloadイベント発火時の処理
var unloaded = function (e) {
// カスタムメッセージの設定（後述するが、EdgeとIEしか表示されない）
var confirmMessage = '離脱するの？';
e.returnValue = confirmMessage;
return confirmMessage;
};
// beforeunloadイベントの登録
window.addEventListener('beforeunload', unloaded, false);
// 特定のボタンがクリックされたときはアラートを表示しないようにもできます。
document.getElementById('mySubmit').addEventListener('click', function(){
// submit時はアラート表示させない
window.removeEventListener('beforeunload', unloaded, false);
});
ただし、上記で設定した「離脱するの？」というカスタムメッセージはEdgeとIEでしか表示されません。
確認時のバージョンは以下。
- Chrome : 62
- Safari : 11
- Firefox : 57
- Edge : 40
- IE : 11.726
- Opera : 49