Firefoxでリロード時にJavaScriptが再実行されない問題への対処法

ウェブページのリロードや戻る・進むで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) でも期待する動作になりますが、どうやらアンドキュメントで非推奨らしいので、上記の方法にしました。

参考になれば幸いです。

Published 2023-08-25
Updated 2023-08-25

「JavaScript」カテゴリの記事一覧