强制浏览器刷新CSS,JavaScript等

我正在通过XAMPP开发基于Wordpress源代码的网站。 有时我更改CSS代码,脚本或其他东西,我注意到我的浏览器需要时间来应用修改。 这导致我使用多个浏览器刷新一个,如果不适用新的样式,我尝试第二个,它总是这样。

有一些方法可以避免这个问题? 有时我会更改代码,恕不另行通知。

一般解决scheme

Ctrl + F5 (或Ctrl + Shift + R )强制caching重新加载。 我相信苹果电脑使用Cmd + Shift + R。

PHP

在PHP中,您可以通过将过期时间设置为过时的标题来禁用高速caching:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT"); header("Last-Modified: " . gmdate("D, d MYH: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打开开发人员工具,单击右下angular的齿轮图标,然后在设置对话框中select“禁用caching”,可以禁用Chrome的caching。

在这里输入图像说明
从这个答复采取的图象。

火狐

在URL栏中inputabout:config ,然后find标题为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">这将绕过caching。

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

它会一直刷新!

编辑:当然,这是不是真的实际的整个网站,因为你不会手动添加这一切。

尝试这个:

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

如果你需要什么东西后? 每次页面被访问时都是不同的,那么time()就会这样做。 将其永久保留在代码中并不是一个好主意,因为它只会减慢页面加载速度,可能不是必需的。

我发现,如果对页面的布局进行了大量更改,并且访问新的样式表对于在屏幕上显示合理内容至关重要,则强制样式表刷新将会很有帮助。

尝试清除浏览器caching。

您可以使用Firefox的Web开发人员工具栏closurescaching。

查看CSS Cache Buster插件 – 这会自动向样式表url中添加一个随机数,就像来自loler的回答一样。 每当你需要重新审视css时,v =需要不同。

http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/

这也将确保您的用户接收最新的CSS文件,如果你在生活中改变任何东西。

确保这不是从你的DNS发生的。 例如,Cloudflare有它可以打开开发模式的地方,因为Cloudflare提供了加速caching,所以它强制清除样式表和图像。 这将禁用它,并强制每次有人访问您的网站时更新。

这个Firefox扩展是我可以工作的唯一解决scheme: https : //addons.mozilla.org/en-us/firefox/addon/css-reloader/

上面接受的答案是正确的。 但是,如果您只想定期重新加载caching,并使用Firefox,则Web Developer工具(截至2015年11月的Tools菜单项下)提供了一个Network选项。 这包括一个重新加载button。 select重新加载一次性caching重置。