【JavaScript】ページがF5などで更新されたのかを判定する

JavaScriptでページがF5などで更新されたのかを判定したい！

概要

今回の記事では、JavaScriptでページがF5などで更新されたのかを判定する手順を掲載する。

表示するページが他のページから遷移してきたのか、F5ブラウザの更新ボタンでページが再読込されたのかを判定する。

環境

• Google Chrome 114.0.5735.199（Official Build）（64 ビット）

手順書

ページの読み込みが完了したタイミングで再読み込身を判定する例。

document.addEventListener('DOMContentLoaded', function () {
    if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
        // 再読み込みだった場合の処理
    } else {
        // 他のページからの遷移やお気に入りから、URL直入力などの場合の処理
    }
});

まとめ（感想文）

SPAで使えそうな感じかもね！