XAMPPを介してWordPressのソースコードに基づいたウェブサイトを開発しています。CSSコードやスクリプトなどを変更すると、ブラウザが変更を適用するのに時間がかかることがあります。これにより、複数のブラウザを使用して1つを更新することになります。新しいスタイルが適用されない場合は、2つ目のブラウザを試してみますが、これは常にこれです。
この問題を回避する方法はありますか？
以前の変更に気付かずにコードを変更することがあります。
質問する
201896 次
18 に答える
125
一般的な解決策
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のキャッシュを無効にするには、で開発者ツールを開き、F12右下隅にある歯車のアイコンをクリックして、次のように設定ダイアログで[キャッシュを無効にする]を選択します。
この回答から取得した画像。
Firefox
URLabout:configバーに入力し、「。」というタイトルのエントリを見つけますnetwork.http.use-cache。これをに設定しfalseます。
于 2012-07-13T16:18:33.787 に答える
53
クライアント側でそれを避けたい?v=1.x場合は、ファイルの内容が変更されたときに、cssファイルリンクのようなものを追加できます。たとえば、これに<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">キャッシュをバイパスします。
于 2012-07-13T16:23:47.507 に答える
11
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(); ?>" />
いつもリフレッシュします！
編集：もちろん、これをすべてに手動で追加することはないので、Webサイト全体では実際には実用的ではありません。
于 2012-07-13T16:26:30.130 に答える
10
これを確認してください：ブラウザに最新バージョンのスタイルシートを使用させるにはどうすればよいですか？
cssファイルがfoo.cssであると仮定すると、以下に示すようにクエリ文字列を追加することで、クライアントに最新バージョンを使用させることができます。
<link rel="stylesheet" href="foo.css?v=1.1">
于 2018-10-20T21:49:15.903 に答える
5
開発者の視点
（元の質問のように）開発モードの場合、最善のアプローチは、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" />
このように、開発者はページを更新するだけで変更を確認できます。ただし、本番環境ではそのコードにコメントすることを忘れないでください。結局のところ、キャッシュはクライアントにとって良いことです。
本番モード
本番環境ではキャッシュを許可し、クライアントはフルリロードやその他のトリックを強制する方法を知る必要がないため、ブラウザが新しいファイルをロードすることを保証する必要があります。はい、この場合、私が知っている最善のアプローチは、ファイルの名前を変更することです。
于 2018-05-30T04:49:40.313 に答える
3
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
変更すると更新されます。
于 2018-01-13T08:33:58.960 に答える
2
そして、私は誰も答えに行くのを見ませんでした。毎回外部CSSをロードする簡単なトリックがあります
<link rel="stylesheet" href="/myExternalCss.css?<?=time()?>">
于 2021-06-19T09:35:28.857 に答える
1
これがDNSから発生していないことを確認してください。たとえば、Cloudflareには開発モードをオンにできる機能があり、Cloudflareは高速キャッシュを提供するため、スタイルシートと画像を強制的にパージします。これにより、無効になり、誰かがサイトにアクセスするたびに強制的に更新されます。
于 2014-01-26T00:04:34.600 に答える
1
外部cssファイルへのhtml-headのlink-tagの代わりに、php-includeを使用します。
<style>
<?php
include("style.css");
?>
</style>
一種のハックですが、私にとってはうまくいきます:)
于 2018-12-18T12:44:50.410 に答える
0
ブラウザのキャッシュをクリアしてみてください。
于 2012-07-13T16:18:39.263 に答える
0
FirefoxのWeb開発者ツールバーを使用してキャッシュをオフにすることができます。
于 2012-07-13T16:19:50.080 に答える
0
このFirefox拡張機能は、私が機能することができる唯一のソリューションでした： https ://addons.mozilla.org/en-us/firefox/addon/css-reloader/
于 2015-02-12T22:09:43.317 に答える
0
上記の受け入れられた答えは正しいです。ただし、キャッシュを定期的にリロードするだけで、Firefoxを使用している場合は、Web開発ツール（2015年11月現在の[ツール]メニュー項目の下）にネットワークオプションがあります。これには、[再読み込み]ボタンが含まれます。キャッシュを一度オフにリセットするには、[リロード]を選択します。
于 2015-11-07T18:55:05.227 に答える
0
これらのファイルがすべてのユーザーに対してChromeによって適切に更新されることを確認する場合はmust-revalidate、Cache-Controlヘッダーに含める必要があります。これにより、Chromeはファイルを再チェックして、ファイルを再フェッチする必要があるかどうかを確認します。
次の応答ヘッダーを推奨します。
Cache-Control: must-validate
これにより、Chromeはサーバーに確認し、新しいファイルがあるかどうかを確認するように指示されます。新しいファイルがある場合は、応答でそれを受け取ります。そうでない場合は、304応答を受け取り、キャッシュ内の応答が最新であることが保証されます。
このヘッダーを設定しない場合、ファイルを無効にする他の設定がない場合、Chromeはサーバーに新しいバージョンがあるかどうかを確認しません。
これは、この問題についてさらに説明しているブログ投稿です。
于 2018-01-30T02:19:30.460 に答える
0
ブラウザは新しいバージョンのcssファイルとjsファイルをチェックしないため、変更を加えるたびにcssディレクトリとjsディレクトリの名前を変更することにしました。ディレクトリ名としてcss1からcss9、js1からjs9を使用しています。9になったら、次に1からやり直します。これは苦痛ですが、毎回完璧に機能します。ユーザーにタイプするように言わなければならないのはばかげています。
于 2018-12-31T15:43:21.243 に答える
0
何千ものクライアントに影響を与えるスタイルシートをリモートで作成および変更できる必要がある場合がありますが、ネットワーク負荷が高くなるリスクがあるため、キャッシュをオフにしません。
HTMLの内容をリモートで変更できるので、スタイルシートをスタイルシートの内容と一致するハッシュコードにリンクします。
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
とは言うものの、HTMLコンテンツが変更されたときに、クライアント側のjavascript関数を使用してノードと属性を慎重に置き換えます。つまり、スタイルシートのリンクタグは置き換えられず、href属性のみが変更されます。
このシナリオは、WindowsのChrome、Firefox、Edge、AndroidのChromeでも正常に機能しますが、驚いたことに、AndroidのWebクライアントでは常に機能するとは限りません。だから私は多かれ少なかれ、javascriptを使用して更新を強制/トリガーするものを探しています-最適には、ページをリロードする必要はありません。
于 2019-09-20T07:51:25.457 に答える
0
Firefox/Chrome開発者ツールバーを使用できます。
- 開発ツールバーを開くCtrl++ShiftI
- [ネットワーク]タブに移動します
- [キャッシュを無効にする]チェックボックスを押します（Firefox：ツールバーの右上、Chrome：ツールバーの上部中央）
于 2020-12-28T10:25:02.973 に答える
-1
これを試して：
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
'？'の後に何かが必要な場合 これは、ページにアクセスするたびに異なり、それtime()を実行します。これをコードに永続的に残すことは、ページの読み込みを遅くするだけで、おそらく必要ないため、実際には良い考えではありません。
ページのレイアウトに大幅な変更を加えた場合、スタイルシートを強制的に更新すると便利であり、新しいスタイルシートにアクセスすることは、画面に適切なものを表示するために不可欠であることがわかりました。
于 2017-08-18T02:30:11.133 に答える