JavaScriptで更新イベントが起きたか検知する方法とコード例

ブラウザで更新ボタンやF5で更新される直前または直後に

  • なんらかの終了処理をさせたい
  • 確認メッセージを出したい
  • そもそも更新させたくない

など色々な処理がしたくなることってよくあると思います。

そこでJavaScript(またはjQuery)で更新イベントを検知する方法についてまとめました。

更新される直前・直後を検知するには

結論から言うと更新検知に使えるのは次の2つのイベントタイプです。

  • beforeunload
  • unlode

beforeunload が更新される直前、unload が更新された直後に呼ばれるイベント

詳しい使い方やコード例なんかは次の通りです。

beforeunload : 更新直前にイベント処理

更新直前の検知には beforeunload  を使えばOK

ただし beforeunload は"更新される前"のページで実行されるという点に要注意です。間違って unload  を使うと"更新後のページ"で処理が行われてしまうので使い方には気を付けたいですね。

 

使い方としてはJSの場合だとaddEventListenerメソッドを使ってコールバックを登録するだけです。

例えば次が更新直前にコールバック登録で処理をしているコード例

 

またjQueryの場合でもonメソッドやbindメソッドから beforeunload  は登録可能です。

例えば次がonメソッドにコールバックを登録しているコード例

コード量的にはこっちの方を使う方が簡潔に書けます。

unload : 更新直後にイベント処理

更新直後なら今度は unload  を使えばOKです。

ただし先ほど書いたように unload は"更新された後"のページで実行されることに要注意。更新される前と後のページだと必要な処理が違うので間違って beforeunload  を使わないように気を付けましょう。

 

使い方については次のようにaddEventListenerメソッドを使うか、

あるいはjQueryなら onメソッド(またはbindメソッド)を使えばOK

普通の開発だとjQueryを使うことが多いので、 addEventListener  を使う場面は少ないと思います。

beforeunload・unloadを使う際の注意点

この2つを使うときはいくつか注意点があります。

 

まず1つめの注意点は呼ばれるタイミングが全く違う、ということ

ここまでで解説したように両者が呼ばれるタイミングは

  • beforeunload ⇒ 更新される前のページ
  • unload ⇒ 更新された後のページ

という風に更新前か更新後かどうかという決定的な違いがあるので、必ず区別して使うようにすべきです。名前が似ているものの全く別のイベントなので要注意

 

そして2つめの注意点は alert や confirm などのダイアログ系の関数が使えない、ということ

もし alert  などを呼び出してしまうと次のようなエラーが出て怒られてしまいます。

なのでもし更新直前にメッセージなどを出すなら次のように書くのが正しいです。

e.returnValue  にメッセージを代入、または return message;  でメッセージを返すことでブラウザ固有の確認ダイアログが表示できます。(ただしChromeやFireFoxなどではメッセージは変更不可な模様・・・)

更新直前だとこういう処理がしたくなることもあるので、その場合はこちらの方法を使うのがベストです。

ここまでのまとめ

ここまでで書いたように更新直前・直後を検知する方法は次の2つ

  • 更新される直前 ⇒ beforeunload を使う
  • 更新された直後 ⇒ unload を使う

更新される直前」なのか「更新された直後」なのかどうかは全く別物なので、両者を混同して使わないように要注意ですね。まあ unload が「更新」なので before + unload で「更新される前」と覚えておけば間違うことはないと思います。

以上、JavaScriptでページ更新の感知をする方法についてでした。ではでは(^_^)/~