强制浏览器刷新 CSS、JavaScript 等

IT技术 javascript css browser xampp
2021-03-17 10:29:55

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

有什么办法可以避免这个问题吗?

有时我在更改代码时没有注意到之前的修改。

6个回答

通用解决方案

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,点击右下角的齿轮图标并在设置对话框中选择禁用缓存,如下所示:

在此处输入图片说明
取自这个答案的图片

火狐

about:config在 URL 栏中键入,然后找到标题为 的条目network.http.use-cache将此设置为false

在最新版本的 Chrome 中:CTRL+R。
2021-04-19 10:29:55
对于 Chrome,您共享的界面略有变化。只需按网络选项卡,您就会在那里找到复选框。
2021-05-06 10:29:55
仅供参考:对于 Mac 上的 Opera,它是 cmd-alt-R
2021-05-10 10:29:55
感谢 JamWaffles 的详细说明,也感谢大家的回复。非常感谢你。
2021-05-15 10:29:55

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

我在许多其他地方发现了这个答案中给出的相同方法,我相信这在过去有效但不再有效。如果您处于开发模式,最好的通用方法是通过 HTML 元标记禁用浏览器中的缓存。请看我下面的回答。
2021-04-18 10:29:55
不以这种方式工作我的朋友。仅当文件名不同时。为什么这么多赞?
2021-04-30 10:29:55
好点,但浏览器总是询问文件。当然服务器会返回“304 Not Modified”。
2021-05-03 10:29:55
@ajozwik 我用 Firefox 26.0 和 Chromium 31.0.1650.57 进行了测试。就像你说的,如果CSS URL 包含一个问号(并且服务器给出响应为空的响应304),Firefox 确实每次都会进行新的查询;如果 CSS URL 不包含问号,Firefox 不会进行新查询。即使带有问号,Chromium 也不会进行新查询。可能这可以被认为是 Firefox 的一个错误。
2021-05-04 10:29:55

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

它会一直刷新!

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

这种方式行不通!仅当文件名不同时,浏览器才会重新加载。或者也许这个提示只适用于某些浏览器,如果它对你有用的话
2021-05-13 10:29:55

检查这个:如何强制浏览器使用我的样式表的最新版本?

假设您的 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" />

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

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