Weblasts

JavaScriptでどういった経緯でページを表示しているかを判定

ページ表示時にアニメーション処理をやる際に必要だったので個人的なメモ
内容がJavaScriptなのはご愛敬

調べるための処理

window .performance .navigation .type

この処理を実行するとページの移動がどのように行われたかを調べることができます。
ページの表示方法は3種類の値という形で受け取ることができます

0 リンクなどのボタンをポチポチしたときや、フォームから移動してきた時に受けとれる値になります
1 再読み込みの操作をした場合に受け取れる値になります。F5キー・リロードボタンを使った時を判定できます。
2 履歴をたどるような操作(←戻る・→すすむボタン)などを行ったときに受け取れる値です。

上記のように受け取った値によって状況を把握できそうなのでif文を使って処理を変えていくとよさそうです。

いろいろな使い方


//リンクなどからの移動時に処理を実行する場合
if (window.performance.navigation.type === 0) {
  //リンクからの移動してきたときの処理
}

//リロード時に処理を実行する場合
if (window.performance.navigation.type === 1) {
  //リロード時の処理
}

//履歴をたどってきたときに処理を実行する場合
if (window.performance.navigation.type === 2) {
  //履歴をたどってきたときの処理
}

ローディング時のアニメーションがリロードの時に出てもちょっとしつこいかなというときには便利かもしれません
else文と組み合わせれば状況に寄っての処理をまとめてかけるので便利かもしれませんね

状況によって処理をする例

if (window.performance.navigation.type === 0) {
  //リンクからの移動してきたときの処理
}else{
  //リロード時や履歴をたどったときの処理
}

Recommend Post