ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
「window.onpageshow」は以下の条件ときにイベントが発生します。
- 最初にページを読み込んだとき
- 同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
- モバイル OS で凍結されたページを復元したとき
- ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき
「event.persisted」はキャッシュが有効化されているとき。
「window.location.reload()」でブラウザリロードを実行します。
※追記：上記の方法でうまくいかないケースがあるようです。その場合は以下もお試しください。
window.addEventListener('pageshow',()=>{
if(window.performance.navigation.type==2) location.reload();
});
他にもイロイロと方法はありますが、このやり方が一番手っ取り早く、簡単かと思います。
ウェブサイトにローディングの処理を加えていて、CSSで「opacity:0;」や「display:none;」を効かせているページにブラウザバックする際、ページ遷移前のキャッシュが残ってしまい、JavaScriptの動作なども実行されたままになってしまう問題が発生しますが、これに対処できる方法です。
また特に MacOS や iOS の Safari で問題になるキャッシュ関係の処理をクリアする際に有効です。
ぜひお試しください。
