目次
本記事では、JavaScriptでブラウザの戻る・進むで表示されたページを判定し、戻る・進むで表示されたページであればリロードを実行する方法をご紹介しています。ページ遷移時にフェードアウトやスライドインするようなアニメーションを実装しているサイトで、ブラウザの戻るや進むで履歴のページを表示した際にアニメーションの終了状態が残っているようなケースで有効な方法です。
ブラウザの戻る・進むで表示されたページか判定し、該当した場合はページをリロードしたいんだけど良い方法ないかな？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
ブラウザの戻る・進むが取得できるイベントについて
JavaScriptでは、ブラウザの戻る（hitory.back()）や進む（history.forward()）でページが表示されたかを判定するpageshowというイベントが用意されています。pageshowイベントは下記の状態になった際に発火します。
- 最初にページを読み込んだ時（イベント発生順はloadが先）
- 同じウィンドウ、タブ内で他のページから遷移してきた時
- ブラウザの戻る、進む機能でページに戻ってきた時
タイミングはいくつかありますが、ブラウザの戻る・進む機能でページに戻ってきた時にもイベントが発火するため、pageshowイベントを検知し、ブラウザの戻る・進むでページが表示されたことを判定。その後でページをリロードする処理を実行すれば、本記事の目的は達成できそうです。
ブラウザの戻る・進むで表示されたページか判定する
前項でブラウザの戻る・進むの操作については、pageshowイベントで取得できることがわかりました。しかしながら、pageshowはページの読み込み等にも発火するイベントのため、発火したイベントがブラウザの戻る・進むの操作によるものかを判定する処理が必要になります。ブラウザの戻る・進む操作で表示されたページか判定するには、PerformanceNavigationTimingというインターフェースを使用します。
window.addEventListener('pageshow', () => {
if(performance.getEntriesByType("navigation")[0].type === 'back_forward'){
//ここに処理
}
});
上記ではtypeの比較にはback_forwardを指定していますが、その他には下記を指定することができます。
| 値 | 説明 |
|---|---|
| navigate | 読み込みで表示されたページ |
| reload | 再読み込みで表示されたページ |
| back_forward | ブラウザの戻る・進むで表示されたページ |
| prerender | <link>のrel="prerender"に指定されたページ |
PerformanceNavigationTimingの詳細につきましては下記ページをご参照ください。
スポンサーリンク
ブラウザの戻る・進むで表示されたページか判定してリロードする
ここまでの内容でで、pageshowでイベントを取得し、PerformanceNavigationTimingでブラウザの戻る・進むの判定まで実現することができました。ページの再読み込みはlocation.reload()で実装できるため、pageshowイベントを取得し、PerformanceNavigationTimingがブラウザの戻る・進むであれば、location.reloadにてページをリロードする処理追加します。
window.addEventListener('pageshow', () => {
if(performance.getEntriesByType("navigation")[0].type === 'back_forward'){
alert('ブラウザの「戻る」または「進む」でページが表示されました。ページをリロードします。');
location.reload();
}
});
以上でブラウザの戻る・進むを判定してページをリロードすることが可能となります。
最後に
WebサイトやWebアプリを構築していてブラウザの戻る・進むといった操作を考慮することはあまりないですが、ページ遷移直前にアニメーションを表示するようなサイトの場合、ブラウザの操作によって意図しない表示になるケースが発生します。ブラウザの戻る・進むといった操作はJavaScriptで判定して任意に処理を実行することができます。本記事の内容が、制作のお役に立てれば幸いです！
以上、JavaScriptでブラウザの戻る・進むで表示されたページを判定してリロードする方法のご紹介でした！
