强制浏览器刷新css,javascript等

Question

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

有一些方法可以避免这个问题吗？有时我在更改代码而不通知以前的修改.

Answer 1

一般解决方案

按Ctrl+ F5(或Ctrl+ Shift+ R)强制重新加载缓存.我相信Macs使用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,单击右下角的齿轮图标,然后在设置对话框中选择禁用缓存,如下所示:

^{从这个答案拍摄的图像.}

火狐

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

Answer 2

如果要在客户端避免这种情况,可以?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">为此将绕过缓存.

Answer 3

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

它会永远刷新!

编辑:当然,它对整个网站来说并不实用,因为你不会手动为所有内容添加它.

Answer 4

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

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

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

Answer 5

开发人员的观点
如果您处于开发模式（如在原始问题中），最好的方法是通过 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" />

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

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