强制浏览器刷新CSS，JavaScript等

我正在通过XAMPP开发基于Wordpress源代码的网站。有时，我更改了CSS代码，脚本或其他内容，但我注意到我的浏览器需要花费一些时间来应用修改。这导致我使用多个浏览器刷新一个浏览器，如果不应用新样式，则尝试第二个浏览器，而且总是这样。

有什么办法可以避免这个问题？有时我在更改代码时没有注意到先前的修改。

一般解决方案

按Ctrl+ F5（或Ctrl+ Shift+ R）强制重新加载缓存。我相信，苹果电脑使用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");

铬

可以使用，打开开发人员工具F12，点击右下角的齿轮图标，然后在设置对话框中选择禁用缓存，以禁用Chrome的缓存，如下所示：

^{图片取自这个答案。}

火狐浏览器

输入about:config到地址栏，然后找到名为项network.http.use-cache。将此设置为false。

如果要避免在客户端?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">为该值，则会绕过缓存。

如果您可以编写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(); ?>" />

它会一直刷新！

编辑：当然，这对于整个网站来说并不实际，因为您不会为所有内容手动添加。

请检查以下内容：如何强制浏览器使用样式表的最新版本？

假设您的css文件是foo.css，您可以通过添加查询字符串来强制客户端使用最新版本，如下所示。

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

开发人员的观点
如果您处于开发模式（如原始问题中所示），最好的方法是通过HTML元标记禁用浏览器中的缓存。要使此方法通用，您必须插入至少三个元标记，如下所示。

<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" />

这样，您作为开发人员，只需刷新页面即可查看更改。但是，不要忘记在生产中注释该代码，毕竟对于您的客户而言，缓存是一件好事。

生产模式
因为在生产中您将允许缓存并且您的客户不需要知道如何强制完全重新加载或任何其他技巧，所以您必须保证浏览器将加载新文件。是的，在这种情况下，我知道的最佳方法是更改​​文件名。

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

如果修改，它将刷新。

确保您的DNS不会发生这种情况。例如，Cloudflare可以在其中打开开发模式，在该模式下，由于Cloudflare提供了加速的缓存，因此可以强制清除样式表和图像。这将禁用它，并在有人访问您的网站时强制其更新。

尝试清除浏览器缓存。

您可以使用Firefox的Web开发人员工具栏关闭缓存。

这个Firefox扩展是我可以使用的唯一解决方案：https : //addons.mozilla.org/en-us/firefox/addon/css-reloader/

上面接受的答案是正确的。但是，如果您只想定期重新加载缓存，并且使用的是Firefox，则Web Developer工具（截至2015年11月在“工具”菜单项下）提供了“网络”选项。这包括一个“重新加载”按钮。选择“重新加载”以重置一次缓存。

如果要确保Chrome对所有用户正确刷新了这些文件，则需要must-revalidate在Cache-Control标题中输入。Chrome将重新检查文件以查看是否需要重新获取文件。

推荐以下响应头：

Cache-Control: must-validate

这告诉Chrome浏览器检查服务器，并查看是否有更新的文件。如果有较新的文件，它将在响应中接收它。如果不是，它将收到304响应，并确保高速缓存中的响应是最新的。

如果您未设置此标头，则在没有任何其他设置会使文件无效的情况下，Chrome将永远不会与服务器核对是否有较新版本。

这是一篇博客文章，进一步讨论了这个问题。

代替html-head中的link-tag到外部css文件，请使用php-include：

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

有点hack，但对我有用:)

我已经决定，由于浏览器不会检查css和js文件的新版本，因此，每当进行更改时，我都会重命名css和js目录。我使用css1到css9和js1到js9作为目录名。当我达到9时，我接下来从1开始。这很痛苦，但是每次都能很好地工作。不得不告诉用户键入是荒谬的。

我有一个案例，我需要能够远程创建和更改样式表，从而影响成千上万的客户端，但是由于网络负载沉重的风险，我没有关闭缓存。

因为我可以远程更改HTML内容，所以我将样式表与匹配样式表内容的哈希码链接。

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

也就是说，我还使用客户端javascript函数在HTML内容更改时仔细替换节点和属性，这意味着样式表链接标记不会被替换，只有href属性会更改。

这种情况在Chrome，Windows上的Firefox和Edge以及Android上的Chrome上都可以正常运行，但并不总是可以在Android上的Web客户端中使用。因此，我或多或少都在寻找某种东西来强制/触发使用javascript进行更新-最佳方式是无需重新加载页面。

试试这个：

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

如果在'？'之后需要一些东西 每次访问该页面都不同，time()则将执行该操作。将其永久保留在代码中并不是一个好主意，因为这只会减慢页面加载速度，而且可能没有必要。

我发现，如果您对页面的布局进行了广泛的更改，则强制刷新样式表会有所帮助，访问新样式表对于在屏幕上显示有意义的内容至关重要。