私はxhtml、cssWebページの開発を学んでいます。多くの場合、CSSで変更を行っていますが、ブラウザーのキャッシュが原因でページに反映されません。手動でキャッシュをクリアすると、最新のコード効果が表示されます。ブラウザにキャッシュされないようにするためのコードを入れることができるものはありますか?アドバイスをお願いします
10 に答える
スタイルシートの URL にランダムなクエリ パラメータを追加できます (たとえば、javascript またはサーバー側のコードを介して)。読み込まれている css ファイルは変更されませんが、ブラウザーが別の URL を検出し、キャッシュされたスタイルシートを読み込まないため、キャッシュが妨げられます。
<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
アプリケーションのバージョン (またはビルド番号やビルド日など) を返す GetVersion メソッドを使用してクラスを作成できます。
マークアップの asp.net アプリケーションの場合、次のように指定できます。
<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />
これにより、静的ファイルへの URL の一部がビルドごとに (または少なくともすべてのバージョンで) 変更されるため、ブラウザーはファイルをリロードする必要があります。
キャッチなし: 次のように、CSS パスの最後に変更可能な文字列を配置します。
<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>
バージョンの変更時に更新:
<link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>
開発ブラウザとして Chrome を使用している場合、次の 2 つのオプションがあります。
1)ページのリロードボタンを 1 秒間押し続けると、メニューが表示され、ハード ページのリロードを行うことができます。
2) インスペクタの設定で、ブラウザがファイルをキャッシュしないように強制できます。
サーバー構成よりもブラウザでキャッシュを無効にすることで、この問題を処理する方が簡単で、速く、問題が少ないと思います。
リンクでランダムなバージョン ID を使用できます。たとえば、これを使用します。
<link href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%> rel="stylesheet" type="text/css"/>
myStyle.css はスタイルシート ファイルで、DateTime.Now.ToString("yyyyMMddhhmmss") 関数はランダムな異なるバージョン ID を生成するために使用されます。このランダムなバージョン ID を使用することで、ブラウザは CSS を強制的にリロードします。
これは、.htaccess ファイルを介して行うことができます。このコードを、Web サイトのルートにある .htaccess という名前のファイルに配置します。
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
- Chrome で F12 を押して開発者ツールを開きます
- 次に、リロード ボタンを右クリックします - (キャッシュのクリアとハード リロード) をクリックします。