blocks|key|522248|text|如果你想在客户端避免这种情况，当文件内容改变时，你可以在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">，这将绕过缓存。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|522249|entityMap^0|13|6|1M|1S|3N|1Y|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

If you want to avoid that on client side you can add something like <code>?v=1.x</code> to css file link, when the file content is changed. for example if there was <code>&lt;link rel="stylesheet" type="text/css" href="css-file-name.css"&gt;</code> you can change it to <code>&lt;link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1"&gt;</code> this will bypass caching.

blocks|key|305538|text|如果你会写php，你可以写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305539|<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();+?>"+/>|code-block|syntax|javascript|305540|它会一直刷新！|305541|编辑:当然，这对整个网站来说并不实用，因为你不会为所有东西都手动添加它。|305542|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you can write php, you can write:

<pre><code>&lt;script src="foo.js&lt;?php echo '?'.mt_rand(); ?&gt;" &gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="foo.css&lt;?php echo '?'.mt_rand(); ?&gt;" /&gt;
&lt;img src="foo.png&lt;?php echo '?'.mt_rand(); ?&gt;" /&gt;
</code></pre>

It will always refresh!

EDIT: Of course, it's not really practical for a whole website, since you would not add this manually for everything.

blocks|key|305850|text|检查这个：How+Do+I+Force+the+Browser+to+Use+the+Newest+Version+of+my+Stylesheet?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|305851|假设您的css文件是foo.css，您可以通过附加查询字符串强制客户端使用最新版本，如下所示。|style|CODE|305852|<link+rel="stylesheet"+href="foo.css?v=1.1">|code-block|syntax|javascript|305853|entityMap|0|LINK|mutability|MUTABLE|url|https://www.impressivewebs.com/force-browser-newest-stylesheet/^0|5|1Y|0|0|A|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Check this: <a href="https://www.impressivewebs.com/force-browser-newest-stylesheet/" rel="noreferrer">How Do I Force the Browser to Use the Newest Version of my Stylesheet?</a>

Assumming your css file is <code>foo.css</code>, you can force the client to use the latest version by appending a query string as shown below.

<pre><code>&lt;link rel="stylesheet" href="foo.css?v=1.1"&gt;
</code></pre>

blocks|key|522508|text|<script+src="foo.js?<?php+echo+date('YmdHis',filemtime('foo.js'));?>"></script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|522509|如果修改，它将刷新。|unstyled|522510|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;script src="foo.js?&lt;?php echo date('YmdHis',filemtime('foo.js'));?&gt;"&gt;&lt;/script&gt;
</code></pre>

It will refresh if modify.

blocks|key|306048|text|我没有看到任何人去回答这个问题。下面是每次加载外部css的简单技巧|type|unstyled|depth|inlineStyleRanges|entityRanges|data|306049|<link+rel="stylesheet"+href="/myExternalCss.css?<?=time()?>">|code-block|syntax|javascript|306050|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

And I didn't see anyone going to the answer.
Here is simple trick to get the external css loaded each time
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/myExternalCss.css?&lt;?=time()?&gt;&quot;&gt;
</code></pre>

blocks|key|305579|text|确保这不是从您的DNS发生的。例如，Cloudflare提供了它，您可以打开开发模式，当Cloudflare提供加速缓存时，它会强制清除样式表和图像。这将禁用它，并强制它在每次有人访问您的网站时进行更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305580|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Make sure this isn't happening from your DNS. For example Cloudflare has it where you can turn on development mode where it forces a purge on your stylesheets and images as Cloudflare offers accelerated cache. This will disable it and force it to update everytime someone visits your site.

blocks|key|522602|text|使用php-include代替html-head中指向外部css文件link-tag：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|522603|<style>
<?php
include("style.css");
?>++++++
</style>|code-block|syntax|javascript|522604|有点像黑客，但对我来说很管用:)|522605|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In stead of link-tag in html-head to external css file, use php-include:

<pre><code>&lt;style&gt;
&lt;?php
include("style.css");
?&gt; 
&lt;/style&gt;
</code></pre>

Kind of hack, but works for me :)

blocks|key|522197|text|请尝试清除浏览器缓存。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|522198|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Try clearing your browsers cache.

blocks|key|522215|text|您可以使用Firefox的web+developer工具栏关闭缓存。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|522216|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can turn off caching with Firefox's web developer toolbar.

blocks|key|522367|text|这个火狐扩展是我唯一可以使用的解决方案：https://addons.mozilla.org/en-us/firefox/addon/css-reloader/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|522368|entityMap|0|LINK|mutability|MUTABLE|url|https://addons.mozilla.org/en-us/firefox/addon/css-reloader/^0|K|1O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This Firefox extension was the only solution I could get to work:
<a href="https://addons.mozilla.org/en-us/firefox/addon/css-reloader/" rel="nofollow">https://addons.mozilla.org/en-us/firefox/addon/css-reloader/</a>

blocks|key|305673|text|上面被接受的答案是正确的。但是，如果您只想定期重新加载缓存，并且您使用的是Firefox，则Web+Developer+tools+(在2015年11月的Tools菜单项下)提供了一个Network选项。这包括一个重新加载按钮。为一次性缓存重置选择“重新加载”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305674|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The accepted answer above is correct. If, however, you only want to reload the cache periodically, and you are using Firefox, the Web Developer tools (under the Tools menu item as of November 2015) provides a Network option. This includes a Reload button. Select the Reload for a once off cache reset.

blocks|key|305939|text|我已经决定，由于浏览器不会检查css和js文件的新版本，因此每当我进行更改时，我都会重命名css和js目录。我使用css1+to+css9和js1+to+js9作为目录名。当我数到9时，我会从1开始。这很痛苦，但每次都能完美地工作。让用户去打字是很可笑的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305940|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I have decided that since browsers do not check for new versions of css and js files, I rename my css and js directories whenever I make a change. I use css1 to css9 and js1 to js9 as the directory names. When I get to 9, I next start over at 1. It is a pain, but it works perfectly every time. It is ridiculous to have to tell users to type .

blocks|key|522745|text|我遇到过这样的情况，我需要能够远程创建和更改影响数千个客户端的样式表，但由于网络负载繁重的风险，我不会关闭缓存。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|522746|由于我可以远程更改HTML内容，因此我将样式表与一个与样式表内容匹配的哈希码链接起来。|522747|https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808|offset|length|522748|也就是说，我还使用客户端javascript函数在HTML内容更改时小心地替换节点和属性，这意味着样式表链接标记不会被替换，只会更改href属性。|522749|这个场景在Windows上的Chrome、Firefox和Edge上运行得很好，在Android上的Chrome也是如此，但令我惊讶的是，在Android上的but客户端上并不总是有效。因此，我或多或少在寻找一些东西来强制/触发使用javascript的更新-最好不需要重新加载页面。|522750|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1X|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@$F|V|G|W|1|X]]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|E]]]]

I have a case, where I need to be able to create and change my stylesheets remotely affecting thousands of clients, but due to risk of heavy network load, I'm not turning off cache.

Since I can change the HTML contents remotely, I then link the stylesheet with a hashcode matching the contents of the stylesheet.

<a href="https://example.com/contents/stylesheetctrl?id=12345&amp;hash=-1456405808" rel="nofollow noreferrer">https://example.com/contents/stylesheetctrl?id=12345&amp;hash=-1456405808</a>

That said, I also use a client-side javascript function to carefully replace nodes and attributes when HTML contents change, meaning the stylesheet link tag will not be replaced, only the href attribute will change.

This scenario works fine in Chrome, Firefox and Edge on Windows, also Chrome on Android, but doesn't always work in webclients on Android to my surprise. So I'm more or less looking for something to force/trigger the update using javascript - optimally without needing to reload the page.

blocks|key|522471|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|522472|link+href="styles/style.css?=time()"+rel="stylesheet"+type="text/css"|code-block|syntax|javascript|522473|如果您在“？”之后需要什么？这是不同的，每次页面被访问时，time()都会这样做。永久地将其保留在代码中并不是一个好主意，因为它只会减慢页面加载速度，而且可能没有必要。|offset|length|style|CODE|522474|我发现，如果您对页面布局进行了大量更改，并且访问新的样式表对于在屏幕上显示一些合理的内容至关重要，那么强制样式表刷新是很有帮助的。|522475|entityMap^0|0|0|T|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Try this:

<pre><code>link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
</code></pre>

If you need something after the '?' that is different every time the page is accessed then the <code>time()</code> will do it. Leaving this in your code permanently is not really a good idea since it will only slow down page loading and probably isn't necessary.

I've found that forcing a style sheet refresh is helpful if you've made extensive changes to a page's layout and accessing the new style sheet is vital to having something sensible appear on the screen.

I'm developing a website based on WordPress source code through XAMPP. Sometimes I change the CSS code, scripts or something else and I notice my browser takes time to apply the modifications. This leads me to use multiple browsers to refresh one and if it doesn't apply the new styles I try the second one and it's always this.
There is some way of avoiding this problem?
Sometimes I'm changing code without noticing the previous modifications.

Force browser to refresh CSS, JavaScript, etc

WordPress

Android

Windows

我正在通过XAMPP开发一个基于WordPress源代码的网站。有时我更改CSS代码，脚本或其他东西，我注意到我的浏览器需要时间来应用这些修改。这导致我使用多个浏览器来刷新一个，如果它不能应用新的样式，我会尝试第二个，结果总是这样。有什么方法可以避免这个问题吗？有时我会在没有注意到之前的修改的情况下更改代码。

问强制浏览器刷新CSS、JavaScript等
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制浏览器刷新CSS、JavaScript等EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制浏览器刷新CSS、JavaScript等
EN