1. HOME
  2. ブログ
  3. IT技術
  4. JavaScriptで離脱防止アラートを表示する(ブラウザバック・リロード・タブ閉じ)
JavaScriptで離脱防止アラートを表示する(ブラウザバック・リロード・タブ閉じ)

JavaScriptで離脱防止アラートを表示する(ブラウザバック・リロード・タブ閉じ)

リロード・タブが閉じられる時の対応

保存されていないデータがあるときに、誤ってページを閉じてしまわないようにアラートを出すやり方を紹介します。ブラウザで戻るボタンやリロードボタンが押された時、タブを閉じようとしたときに動きます。

beforeunloadを使います。ウィンドウや文書がアンロード(リロードやタブを閉じる)時のイベントです。同様に onbeforeunload でも設定できますが、addEventListener の方が推奨されています。

returnValueなどを設定してはいますが、表示させる文章を操作することはできません。
以前は指定可能だったようですが、よろしくないメッセージ(「ページを離れるとウイルスにかかるぞー!」みたいな)が設定されることもあったため、現在はブラウザごとに規定の文章になっているようです。

ブラウザバック時の対応

基本的には popstate イベント を利用します。
履歴がスタック状にブラウザに記録されている中で、その記録を取り出すときのイベントです。ブラウザバック時、このイベントが実行されています。


注意点:MDNにも書いてあるように、実行されるとキャンセルできません。それを踏まえた上での実装を!

調べていると、popstateを使用せず、onhashchangeなどハッシュの変更を検知することで、ブラウザバックの対応をすることもあるそうです。状況に合わせて使いたいですね。

各フレームワーク・ライブラリの使えそうなメソッド

ブラウザバック時などに使えそうな各ライブラリ・フレームワークのメソッドをいくつか見つけたので、軽くご紹介します。

Vue

Vue Router - beforeRouteLeave

編集中に誤って経路を離れるのを防ぐ時を想定して作られてます。
詳細:ナビゲーションガード | Vue Router

React

先に React での注意点です。アンマウント時にイベントを解除しておかないと、該当箇所以外でもイベントが実行されます!

 

react-router-dom - history.block

react-routerの中に入っているweb用のルーターライブラリ。
そのhistory.blockも編集中に誤ってページを離れるのを防ぐのに適してます。
詳細:Blocking Transitions

 

Next.js - router.beforePopstate

popstate が起きる前に処理を追加できます。
詳細:next/router router.beforePopState|Next.js

さいごに

デフォルトのJavaScriptだけでなく、ライブラリのメソッドもご紹介しましたが、状況に適したやり方を使っていけたらいいですね!

書いた人はこんな人

岡坂(エンジニア)
岡坂(エンジニア)
Webエンジニア。
好きなものはフルーツタルト。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア