JavaScriptでページが更新 or 戻る・進むされたかなどを調べる方法

ブラウザでページが読み込まれる場合、大体次の3パターンがあります。

  • ブラウザで初めて読み込まれるパターン
  • 更新ボタンで更新して読み込まれるパターン
  • 戻る・進むボタンから読み込まれるパターン

こういう風にどうやってページが読み込まれたか調べたいときってありますよね。

そこでJavaScriptからページの読み込みタイプを調べる方法をまとめました。

読み込みタイプ取得には PerformanceNavigationTiming を使う

ではどうやって読み込みの種類を取得すればいいのか・・・

その結論から言うと PerformanceNavigationTiming  から取得可能です。

これはブラウザのパフォーマンス的な情報を調べるためのインターフェイスで、その中の type  を調べれば読み込みの種類を文字列として返してくれます。

ただし PerformanceNavigationTiming  というオブジェクトがあるわけではありません。実際に使用する場合は performanceオブジェクトからプロパティにアクセスする必要があります。

 

例えば次が読み込みタイプを取得しているコード例

注意点は navigation  オブジェクトにアクセスするとき、 getEntriesByType  からリスト形式で取得しなければならないことです。 performance.navigation.type  みたいに直接アクセスするのはNGなので要注意!

あとはforEachループ内で pe.type  みたいに読み込みタイプを取得するだけです。

 

では読み込みタイプで返される値文字列)にはどんな値が定義されているのか・・・

それを分かりやすく表にまとめてみるとこんな感じです。

値(文字列) この値が返される条件
navigate リンククリック 、ブラウザのアドレス欄でURL直打ち、フォーム送信での遷移、etc...などでページが読み込まれた場合
reload 文字通りブラウザの更新ボタン(あるいはF5キーなど)が押されて更新された場合
back_forward ブラウザの戻るまたは進むボタンが押され、前あるいは後ろのページから移動して読み込まれた場合
prerender linkタグでrel="prerender"を使って事前にページが読み込みされた場合

返り値は通常読み込みなら "navigate"  、更新なら "reload"  、戻る・進むなら "back_forward"  です。

 

ただし "prerender"  についてはlinkタグで事前読み込みされた場合しか返ってきません。

例えば次が https://example.com/next.html  というページを事前読み込みしているHTML例

事前読み込みする場合は上コードみたいに rel="prerender"  を指定します。このlinkタグのあるページから next.html に移動すると "prerender"  が返ってくるという訳です。

ちなみにですが rel="prerender"  が指定できる対象は1ページまでに制限されています。

 

以上がブラウザでページ読み込みタイプを取得する方法

通常読み込みなら "navigate"  、更新なら "reload"  、進む・戻るのページ移動なら "back_forward"  、少しレアなパターンだと "prerender"  が返ってくると考えておけば問題ないと思います。

注意点 : performance.navigation.type は使ってはダメ!

実は上で紹介した方法以外にも読み込みタイプを取得する方法はあります。

それが performance.navigation.type  みたいに直接 type  の値にアクセスする方法

この方法を使った場合、返される値(定数)は次の通りです。

  • TYPE_NAVIGATE
    値としては   0  で返される条件はリンククリックなどの通常読み込みの場合
  • TYPE_RELOAD
    値としては 1  で返される条件は更新ボタンなどページが更新された場合
  • TYPE_BACK_FORWARD
    値としては 2  で返される条件は戻る・進むでページ移動が起こった場合
  • TYPE_RESERVED
    値としては 255  で返される条件は上3つのどれにも当てはまらなかった場合

先ほどと違うのは返り値が定数で返されることと、 rel="prerender"  で返される値がないことですね。

 

そしてこれを使えば次コードのようにページ読み込みタイプを判別することもできます。

少し前まではこの書き方でもOKでした。

 

ですが現在だと直接 performance.navigation.type  にアクセスするのは禁止されています。

例えば次がMDNリファレンスで非推奨(deprecated)だと書かれている部分

This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the PerformanceNavigationTiming interface instead.

引用 : PerformanceNavigation.type | MDN

代わりにPerformanceNavigationTiming(先ほど紹介した方法)を使えとはっきり書かれているので、直接読み込みタイプにアクセスしないように要注意です。

 

なので今例に挙げた読み込みタイプを判別するコードを正しく書き直すと次のような感じ

getEntriesByType('navigate')  のようにすると PerformanceEntry  の配列が返ってきます。

あとはそれをforEachループで回すなりすれば安全にプロパティにアクセスできるので、必ずこちらの方法を使うようにすべきですね。

ここまでのまとめ

ということで簡単にここまでのまとめ

  • PerformanceNavigationTimingを使うのが正しい方法
    このインターフェイスから type  にアクセスすれば読み込みタイプを文字列で取得可能
    値は通常読み込みなら "navigate"  、更新なら "reload"  、戻る・進むによるページ移動なら "back_forward"  、事前読み込みなら "prerender"  が返される
  • performance.navigation.type を使うのは絶対ダメ!
    現在は直接 navigation のプロパティにアクセスするのは非推奨になっているので要注意

通常読み込みと更新読み込みで違う動作をさせたいなどの場合に便利かもしれません。

以上JavaScriptで更新とか戻る・進のページ読み込みタイプを取得する方法についてでした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください