--- title: 【JavaScript】ページ離脱時に beforeunload でアラート表示、だがカスタムメッセージが設定できない tags: JavaScript author: naoki_koreeda slide: false --- JavaScript で `beforeunload` イベントを使うと、ブラウザの閉じるボタンやリロード、他のページに遷移しようとしたときにアラートを表示することができます。 以下は、aタグリンクとsubmitボタンを配置しただけのHTMLです。 ```html:index.html beforeunloadTest
link
``` 以下のように、beforeunloadイベント発火時の処理とイベントの登録を実装します。 ```js: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