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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。