ウェブページのリロードや戻る・進むでJavaScriptが動作しない現象に対する効果的な対処法を紹介します。提供されるコードスニペットを利用して、ブラウザの動作停止の闇から抜け出しましょう。
Firefoxにおいて、ページをリロードしたり戻る・進むした際に、ページの状態やコンテンツは更新されるものの、JavaScriptが再実行されないという問題がありまして、以下のコードで対応できたのでご紹介します。
コードの処理の内容はコメントアウトで書いておきました。
// ブラウザのユーザーエージェント文字列を取得し、Firefoxであるかを判定
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
// ページのナビゲーションタイミング情報を取得
const navigationTimings = window.performance.getEntriesByType('navigation');
// 最初のナビゲーションタイミング情報を取得
const navigationTiming = navigationTimings[0];
// もしページがリロードまたは戻る・進む操作によって遷移してきた場合
if (navigationTiming.type === 'reload' || navigationTiming.type === 'back_forward') {
// 現在のURLに強制的にリダイレクトして、ページの再読み込みを実行
location.replace(location.href);
}
}
ちなみに、location.replace(location.href)
のところは location.reload(true)
でも期待する動作になりますが、どうやらアンドキュメントで非推奨らしいので、上記の方法にしました。
参考になれば幸いです。