ブラウザでページが読み込まれる場合、大体次の３パターンがあります。
- ブラウザで初めて読み込まれるパターン
- 更新ボタンで更新して読み込まれるパターン
- 戻る・進むボタンから読み込まれるパターン
こういう風にどうやってページが読み込まれたか調べたいときってありますよね。
そこでJavaScriptからページの読み込みタイプを調べる方法をまとめました。
このページの目次
ではどうやって読み込みの種類を取得すればいいのか・・・
その結論から言うと PerformanceNavigationTiming から取得可能です。
これはブラウザのパフォーマンス的な情報を調べるためのインターフェイスで、その中の type を調べれば読み込みの種類を文字列として返してくれます。
ただし PerformanceNavigationTiming というオブジェクトがあるわけではありません。実際に使用する場合は performanceオブジェクトからプロパティにアクセスする必要があります。
例えば次が読み込みタイプを取得しているコード例
|
1 2 3 4 5 6 |
var perfEntries = performance.getEntriesByType("navigation"); perfEntries.forEach(function(pe){ /** 読み込みタイプを取得 */ var type = pe.type; }); |
注意点は 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例
|
1 |
<link rel="prerender" href="https://example.com/next.html"> |
事前読み込みする場合は上コードみたいに rel="prerender" を指定します。このlinkタグのあるページから next.html に移動すると "prerender" が返ってくるという訳です。
ちなみにですが rel="prerender" が指定できる対象は１ページまでに制限されています。
以上がブラウザでページ読み込みタイプを取得する方法
通常読み込みなら "navigate" 、更新なら "reload" 、進む・戻るのページ移動なら "back_forward" 、少しレアなパターンだと "prerender" が返ってくると考えておけば問題ないと思います。
実は上で紹介した方法以外にも読み込みタイプを取得する方法はあります。
それが performance.navigation.type みたいに直接 type の値にアクセスする方法
この方法を使った場合、返される値（定数）は次の通りです。
- TYPE_NAVIGATE
値としては 0 で返される条件はリンククリックなどの通常読み込みの場合
- TYPE_RELOAD
値としては 1 で返される条件は更新ボタンなどページが更新された場合
- TYPE_BACK_FORWARD
値としては 2 で返される条件は戻る・進むでページ移動が起こった場合
- TYPE_RESERVED
値としては 255 で返される条件は上３つのどれにも当てはまらなかった場合
先ほどと違うのは返り値が定数で返されることと、 rel="prerender" で返される値がないことですね。
そしてこれを使えば次コードのようにページ読み込みタイプを判別することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
window.onload = function(){ var type = performance.navigation.type; switch(type){ case performance.navigation.TYPE_NAVIGATE: console.log('通常のアクセス'); break; case performance.navigation.TYPE_RELOAD: console.log('更新によるアクセス'); break; case performance.navigation.TYPE_BACK_FORWARD: console.log('戻るによるアクセス'); break; case performance.navigation.TYPE_RESERVED: default: console.log('その他のアクセス'); break; } }; |
少し前まではこの書き方でも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.
代わりにPerformanceNavigationTiming（先ほど紹介した方法）を使えとはっきり書かれているので、直接読み込みタイプにアクセスしないように要注意です。
なので今例に挙げた読み込みタイプを判別するコードを正しく書き直すと次のような感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
window.onload = function(){ var perfEntries = performance.getEntriesByType("navigation"); perfEntries.forEach(function(pe){ switch( pe.type ){ case 'navigate': console.log('通常のアクセス'); break; case 'reload': console.log('更新によるアクセス'); break; case 'back_forward': console.log('戻るによるアクセス'); break; case 'prerender': console.log('レンダリング前'); break; } }); }; |
getEntriesByType('navigate') のようにすると PerformanceEntry の配列が返ってきます。
あとはそれをforEachループで回すなりすれば安全にプロパティにアクセスできるので、必ずこちらの方法を使うようにすべきですね。
ここまでのまとめ
ということで簡単にここまでのまとめ
- PerformanceNavigationTimingを使うのが正しい方法
このインターフェイスから type にアクセスすれば読み込みタイプを文字列で取得可能
値は通常読み込みなら "navigate" 、更新なら "reload" 、戻る・進むによるページ移動なら "back_forward" 、事前読み込みなら "prerender" が返される - performance.navigation.type を使うのは絶対ダメ！
現在は直接 navigation のプロパティにアクセスするのは非推奨になっているので要注意
通常読み込みと更新読み込みで違う動作をさせたいなどの場合に便利かもしれません。
以上JavaScriptで更新とか戻る・進のページ読み込みタイプを取得する方法についてでした。
