ブラウザで更新ボタンやF5で更新される直前または直後に
- なんらかの終了処理をさせたい
- 確認メッセージを出したい
- そもそも更新させたくない
など色々な処理がしたくなることってよくあると思います。
そこでJavaScript（またはjQuery）で更新イベントを検知する方法についてまとめました。
このページの目次
更新される直前・直後を検知するには
結論から言うと更新検知に使えるのは次の２つのイベントタイプです。
- beforeunload
- unlode
beforeunload が更新される直前、unload が更新された直後に呼ばれるイベント
詳しい使い方やコード例なんかは次の通りです。
beforeunload : 更新直前にイベント処理
更新直前の検知には beforeunload を使えばOK
ただし beforeunload は"更新される前"のページで実行されるという点に要注意です。間違って unload を使うと"更新後のページ"で処理が行われてしまうので使い方には気を付けたいですね。
使い方としてはJSの場合だとaddEventListenerメソッドを使ってコールバックを登録するだけです。
例えば次が更新直前にコールバック登録で処理をしているコード例
|
1 2 3 4 |
window.addEventListener('beforeunload', function(e){ /** 更新される直前の処理 */ console.log('beforeunload'); }); |
またjQueryの場合でもonメソッドやbindメソッドから beforeunload は登録可能です。
例えば次がonメソッドにコールバックを登録しているコード例
|
1 2 3 4 |
$(window).on('beforeunload', function(e){ /** 更新される直前の処理 */ console.log('beforeunload'); }); |
コード量的にはこっちの方を使う方が簡潔に書けます。
unload : 更新直後にイベント処理
更新直後なら今度は unload を使えばOKです。
ただし先ほど書いたように unload は"更新された後"のページで実行されることに要注意。更新される前と後のページだと必要な処理が違うので間違って beforeunload を使わないように気を付けましょう。
使い方については次のようにaddEventListenerメソッドを使うか、
|
1 2 3 4 |
window.addEventListener('unload', function(e){ /** 更新される直前の処理 */ console.log('unload'); });<br> |
あるいはjQueryなら onメソッド（またはbindメソッド）を使えばOK
|
1 2 3 4 |
$(window).on('unload', function(e){ /** 更新される直前の処理 */ console.log('unload from jquery'); }); |
普通の開発だとjQueryを使うことが多いので、 addEventListener を使う場面は少ないと思います。
beforeunload・unloadを使う際の注意点
この２つを使うときはいくつか注意点があります。
まず１つめの注意点は呼ばれるタイミングが全く違う、ということ
ここまでで解説したように両者が呼ばれるタイミングは
- beforeunload ⇒ 更新される前のページ
- unload ⇒ 更新された後のページ
という風に更新前か更新後かどうかという決定的な違いがあるので、必ず区別して使うようにすべきです。名前が似ているものの全く別のイベントなので要注意
そして２つめの注意点は alert や confirm などのダイアログ系の関数が使えない、ということ
もし alert などを呼び出してしまうと次のようなエラーが出て怒られてしまいます。
|
1 |
Blocked alert('beforeunload') during beforeunload. |
なのでもし更新直前にメッセージなどを出すなら次のように書くのが正しいです。
|
1 2 3 4 5 |
$(window).on('beforeunload', function(e){ var message = '本当に更新してよろしいですか？'; e.returnValue = message; return message; }); |
e.returnValue にメッセージを代入、または return message; でメッセージを返すことでブラウザ固有の確認ダイアログが表示できます。（ただしChromeやFireFoxなどではメッセージは変更不可な模様・・・）
更新直前だとこういう処理がしたくなることもあるので、その場合はこちらの方法を使うのがベストです。
ここまでのまとめ
ここまでで書いたように更新直前・直後を検知する方法は次の２つ
- 更新される直前 ⇒ beforeunload を使う
- 更新された直後 ⇒ unload を使う
「更新される直前」なのか「更新された直後」なのかどうかは全く別物なので、両者を混同して使わないように要注意ですね。まあ unload が「更新」なので before + unload で「更新される前」と覚えておけば間違うことはないと思います。
以上、JavaScriptでページ更新の感知をする方法についてでした。ではでは(^_^)/~
