こんにちはフロントエンドエンジニアのまさにょんです！
今回は、JavaScriptでReloadイベントを検知する方法と更新を検知する方法について解説していきます。
目次
JavaScriptでReloadイベントを検知する方法
JavaScriptでReloadイベントを検知する方法として、2つの方法を紹介します。
window.performance.navigation.type で取得できる値は、ページの読み込みが何によるものかを判定することができます。
取得できる数値が、それぞれ次のような意味を持つので、Reloadを判定することが可能です。
| 値 | 意味 |
| 0 | リンクのクリックからページ移動 |
| 1 | リロードによるページ移動 |
| 2 | 履歴からページ移動 |
| 255 | 上記以外 |
<div>
<h1>Reloadを検知する方法</h1>
</div>
<script>
if (window.performance) {
if (window.performance.navigation.type === 1) {
console.log('Reloadされました！');
} else {
console.log('Reloadされてません！');
}
}
</script>window.performance.getEntriesByType("navigation")[0].type で取得できる値は、
navigate、reload、back_forward、prerenderのいずれかです。
取得した値が reload だったら、Reloadされたと判定できます。
次のSampleCodeでは、addEventListenerのloadイベントを用いて、ページ読み込み時のみリロード判定の処理を実行しています。
<div>
<h1>Reloadを検知する方法</h1>
</div>
<script>
let isReload = false;
window.addEventListener('load', () => {
const perfEntries = performance.getEntriesByType("navigation");
isReload = perfEntries[0].type === 'reload';
isReload ? console.log('Reloadしている！') : console.log('Reloadしていない！');
});
</script>JavaScriptで更新を検知する方法
JavaScriptで更新を検知する際に使えるイベントタイプに、beforeunload と unlode があります。
beforeunload が更新される直前に実行されるイベント処理で、unload が更新された直後に実行されるイベント処理です。
beforeunload で更新される直前に処理を実行する
// beforeunload : 更新直前にイベント処理
window.addEventListener('beforeunload', (e) => {
console.log('beforeunload で更新される直前に処理を実行する');
});unload で更新された直後に処理を実行する
// unload : 更新直後にイベント処理
window.addEventListener('unload', (e) => {
console.log('unload で更新された直後に処理を実行する');
})JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
参考・引用
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
