JavaScriptでどういった経緯でページを表示しているかを判定
ページ表示時にアニメーション処理をやる際に必要だったので個人的なメモ
調べるための処理
window.performance.navigation.type
この処理を実行するとページの移動がどのように行われたかを調べることができます。
ページの表示方法は3種類の値という形で受け取ることができます
| 値 | 値の意味 |
|---|---|
| 0 | リンクなどのボタンをポチポチしたときや、フォームから移動してきた時に受けとれる値になります |
| 1 | 再読み込みの操作をした場合に受け取れる値になります。F5キー・リロードボタンを使った時を判定できます。 |
| 2 | 履歴をたどるような操作（←戻る・→すすむボタン）などを行ったときに受け取れる値です。 |
上記のように受け取った値によって状況を把握できそうなのでif文を使って処理を変えていくとよさそうです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//リンクなどからの移動時に処理を実行する場合 if (window.performance.navigation.type === 0) { //リンクからの移動してきたときの処理 } //リロード時に処理を実行する場合 if (window.performance.navigation.type === 1) { //リロード時の処理 } //履歴をたどってきたときに処理を実行する場合 if (window.performance.navigation.type === 2) { //履歴をたどってきたときの処理 } |
ローディング時のアニメーションがリロードの時に出てもちょっとしつこいかなというときには便利かもしれません
else文と組み合わせれば状況に寄っての処理をまとめてかけるので便利かもしれませんね
|
1 2 3 4 5 |
if (window.performance.navigation.type === 0) { //リンクからの移動してきたときの処理 }else{ //リロード時や履歴をたどったときの処理 } |
