【JavaScript】ブラウザの閉じるボタンを押したときにアラートを表示する方法！

あきぞらです。

フロントエンドの開発をしていて、

Webブラウザを閉じるための「×」ボタンを押したときにアラートを出す処理を加える必要がありました。

この方法について、今回は紹介したいと思います。

onbeforeunloadイベントを使って閉じるボタンのときにアラートを表示させる

onbeforeunloadというイベントを使うと、

ウィンドウを閉じるときにアラートを表示させることができます。

ただ、アラートで表示される文言は主要なブラウザではほぼ特定の文になっています。

window.addEventListener('beforeunload', function (e) {
  // イベントをキャンセルする
  e.preventDefault();
  // Chrome では returnValue を設定する必要がある
  e.returnValue = '';
});

MDN Web Docs

 

9 users

WindowEventHandlers.onbeforeunload

https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onbeforeunload

onbeforeunload は WindowEventHandlers ミックスインのプロパティで、 beforeunload イベントを処理する EventHandler です。このイベントはウィンドウでリソースを unload しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャン...

以下はGoogle Chromeでのアラート文です。

アラート以外の処理をいれることはできるのか？

どうやら、アラート以外の処理を入れることはできないようです。

閉じるボタンを押すときに色んな操作ができるようになってしまったら、

「永久に閉じれないウィンドウ」も作ることが可能になってしまいます。

そういったリスクを鑑みて、基本的にブラウザでは特定のアラートを表示するのみとなっているようです。