【JavaScript】ブラウザの戻る・進むで表示されたページを判定してリロードする

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでブラウザの戻る・進むで表示されたページを判定し、戻る・進むで表示されたページであればリロードを実行する方法をご紹介しています。ページ遷移時にフェードアウトやスライドインするようなアニメーションを実装しているサイトで、ブラウザの戻るや進むで履歴のページを表示した際にアニメーションの終了状態が残っているようなケースで有効な方法です。

ブラウザの戻る・進むで表示されたページか判定し、該当した場合はページをリロードしたいんだけど良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

ブラウザの戻る・進むが取得できるイベントについて

JavaScriptでは、ブラウザの戻る（hitory.back()）や進む（history.forward()）でページが表示されたかを判定するpageshowというイベントが用意されています。pageshowイベントは下記の状態になった際に発火します。

最初にページを読み込んだ時（イベント発生順はloadが先）
同じウィンドウ、タブ内で他のページから遷移してきた時
ブラウザの戻る、進む機能でページに戻ってきた時

タイミングはいくつかありますが、ブラウザの戻る・進む機能でページに戻ってきた時にもイベントが発火するため、pageshowイベントを検知し、ブラウザの戻る・進むでページが表示されたことを判定。その後でページをリロードする処理を実行すれば、本記事の目的は達成できそうです。

参考：https://developer.mozilla.org/ja/docs/Web/API/Window/pageshow_event

ブラウザの戻る・進むで表示されたページか判定する

前項でブラウザの戻る・進むの操作については、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の詳細につきましては下記ページをご参照ください。

参考：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
参考：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type#value

ブラウザの戻る・進むで表示されたページか判定してリロードする

ここまでの内容でで、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でブラウザの戻る・進むで表示されたページを判定してリロードする方法のご紹介でした！