web-dev-qa-db-ja.com

ブラウザにcss、javascriptなどを強制的に更新させます

XAMPPを介してWordpressソースコードに基づいてWebサイトを開発しています。 CSSコードやスクリプトなどを変更すると、ブラウザが変更を適用するのに時間がかかることがあります。これにより、1つを更新するために複数のブラウザーを使用することになり、新しいスタイルを適用しない場合は2つ目のブラウザーを試してみますが、これは常にこれです。

この問題を回避する方法はありますか？以前の変更を予告なくコードを変更する場合があります。

javascriptcssbrowserxampp
69
user1511579

一般的な解決策

押す Ctrl + F5 （または Ctrl + Shift + R）キャッシュのリロードを強制します。 Macが使用していると思う Cmd + Shift + R。

PHP

PHPでは、ヘッダーを使用して有効期限を過去の時間に設定することにより、キャッシュを無効にできます。

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome

Chromeのキャッシュを無効にするには、開発者ツールを開きます F12、右下の歯車アイコンをクリックし、設定ダイアログで[キャッシュを無効にする]を選択します。次のようになります。

enter image description here
この回答 から取得した画像。

Firefox

URLバーにabout:configと入力してから、network.http.use-cacheというタイトルのエントリを見つけます。これをfalseに設定します。

91
Bojangles

クライアント側でそれを避けたい場合は、ファイルの内容が変更されたときに、CSSファイルリンクに?v=1.xなどを追加できます。たとえば、<link rel="stylesheet" type="text/css" href="css-file-name.css">があった場合は、<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">に変更できます。これにより、キャッシュがバイパスされます。

48
F0G

Phpを記述できる場合、次のように記述できます。

<script src="foo.js<?php echo '?'.mt_Rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_Rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_Rand(); ?>" />

常に更新されます！

編集：もちろん、これをすべてのウェブサイトに手動で追加するわけではないので、ウェブサイト全体では実際的ではありません。

9
Mageek

これを確認してください： ブラウザにスタイルシートの最新バージョンを使用させるにはどうすればよいですか？

Cssファイルがfoo.cssであると仮定すると、以下に示すようにクエリ文字列を追加することにより、クライアントに最新バージョンを使用させることができます。

<link rel="stylesheet" href="foo.css?v=1.1">
5
Michael Mulikita

開発者の視点
開発モードの場合（元の質問のように）、最善の方法は、HTMLメタタグを介してブラウザーのキャッシュを無効にすることです。このアプローチを汎用的にするには、以下に示すように少なくとも3つのメタタグを挿入する必要があります。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

このようにして、開発者は、変更を確認するためにページを更新するだけで済みます。ただし、すべてのキャッシングはクライアントにとって良いことなので、運用中にそのコードをコメントすることを忘れないでください。

プロダクションモード
本番環境ではキャッシュを許可し、クライアントは完全なリロードやその他のトリックを強制する方法を知る必要がないため、ブラウザが新しいファイルをロードすることを保証する必要があります。はい、この場合、私が知っている最善の方法は、ファイルの名前を変更することです。

3
ePi272314
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

変更すると更新されます。

2
AllenBooTung

ブラウザはcssファイルとjsファイルの新しいバージョンをチェックしないため、変更を加えるたびにcssディレクトリとjsディレクトリの名前を変更することにしました。ディレクトリ名としてcss1〜css9およびjs1〜​​js9を使用します。 9になったら、次に1からやり直します。これは苦痛ですが、毎回完全に機能します。ユーザーにタイプするように言わなければならないのはばかげています。

0
Roger Jones

これがDNSから発生していないことを確認してください。たとえば、Cloudflareにはキャッシュが用意されているため、開発モードをオンにしてスタイルシートと画像を強制的に消去することができます。これにより、サイトが無効になり、誰かがサイトにアクセスするたびに強制的に更新されます。

0
Sean

このFirefox拡張機能は、私が動作する唯一のソリューションでした： https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

0
Keyslinger

外部CSSファイルへのhtml-headのlink-tagの代わりに、php-includeを使用します。

<style>
<?php
include("style.css");
?>      
</style>

ハッキングのようなものですが、私のために動作します:)

0
Jens Rundberg

上記の受け入れられた答えは正しいです。ただし、キャッシュを定期的にリロードするだけで、Firefoxを使用している場合、Web Developerツール（2015年11月現在の[ツール]メニュー項目の下）には[ネットワーク]オプションがあります。これには、再読み込みボタンが含まれます。 1回限りのキャッシュリセットの場合は、[リロード]を選択します。

0
Steve Cooke

これらのファイルがすべてのユーザーに対してChromeによって適切に更新されるようにする場合は、must-revalidateヘッダーにCache-Controlを含める必要があります。これにより、Chromeを再チェックして、ファイルを再フェッチする必要があるかどうかを確認します。

次の応答ヘッダーをお勧めします。

Cache-Control: must-validate

これは、Chromeにサーバーを確認し、新しいファイルがあるかどうかを確認するよう指示します。新しいファイルがある場合、応答で受信します。そうでない場合、304応答を受け取り、キャッシュ内の応答が最新であることを保証します。

このヘッダーを設定しない場合、ファイルを無効にする他の設定がない場合、Chromeはneverでチェックしますサーバーは、新しいバージョンがあるかどうかを確認します。

ここに ブログ投稿 があり、この問題についてさらに説明しています。

0
AgilePro

ブラウザのキャッシュをクリアしてみてください。

0
DominicEU

FirefoxのWeb開発者ツールバーでキャッシュをオフにすることができます。

0
Florent