强制浏览器刷新css，javascript等

Question

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

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

Answer 1

一般解决方案

按 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");

铬

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

^{图片取自this answer。}

火狐

在网址栏中输入about:config，然后找到标题为network.http.use-cache的条目。将其设置为false。

Answer 2

如果要在客户端避免这种情况，可以在更改文件内容时向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">，这将绕过缓存。

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

检查以下内容：How Do I Force the Browser to Use the Newest Version of my Stylesheet?

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

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

Answer 5

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

修改时会刷新。

Answer 6

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

通过这种方式，您作为开发人员，只需刷新页面即可查看更改。 但是不要忘记在生产中对代码进行评论，毕竟缓存对您的客户来说是件好事。

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

Answer 7

而且我没有看到有人回答。 这是每次加载外部css的简单技巧

<link rel="stylesheet" href="/myExternalCss.css?<?=time()?>">

Answer 8

您可以使用 Firefox/Chrome 开发者工具栏：

1. 打开开发工具栏 Ctrl + Shift + I
2. 转到网络标签
3. 按下“禁用缓存”复选框（Firefox：工具栏右上角；Chrome：工具栏顶部中心）

Answer 9

我有一种情况，我需要能够远程创建和更改样式表，从而影响成千上万的客户端，但是由于网络负载很大的风险，我无法关闭缓存。

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

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

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

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

Answer 10

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

Answer 11

使用php-include代替html-head中指向外部css文件的链接标记：

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

有点黑，但对我有用：）

Answer 12

如果您想确保Chrome为所有用户正确刷新这些文件，那么您需要在FD标题中添加must-revalidate。这将使Chrome重新检查文件以查看是否需要重新获取文件。

推荐以下响应标题：

Cache-Control

这告诉Chrome检查服务器，看看是否有更新的文件。如果有更新的文件，它将在响应中收到它。如果没有，它将收到304响应，并确保缓存中的那个是最新的。

如果您没有设置此标头，那么在没有任何其他设置使文件无效的情况下，Chrome将从不检查服务器以查看是否有更新的版本。

这是一个blog post，可以进一步讨论这个问题。

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

尝试清除浏览器缓存。

Answer 18

试试这个：

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

如果你需要''后面的东西？每次访问页面时都会有所不同，time()会执行此操作。永久保留在您的代码中并不是一个好主意，因为它只会减慢页面加载速度，可能不是必需的。

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