javascript - 强制浏览器刷新 CSS、JavaScript 等

Question

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

有什么方法可以避免这个问题？

有时我在没有注意到以前的修改的情况下更改代码。

score 125 · Accepted Answer

General solution

Pressing Ctrl + F5 (or Ctrl + Shift + R) to force a cache reload. I believe Macs use Cmd + Shift + R.

PHP

In PHP, you can disable the cache by setting the expiration date to a time in the past with headers:

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

Chrome's cache can be disabled by opening the developer tools with F12, clicking on the gear icon in the lower right corner and selecting Disable cache in the settings dialog, like this:

enter image description here
^{Image taken from this answer.}

Firefox

Type about:config into the URL bar then find the entry titled network.http.use-cache. Set this to false.

score 53 · Accepted Answer

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

score 11 · Accepted Answer

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

它会一直刷新！

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

score 10 · Accepted Answer

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

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

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

score 5 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

修改后会刷新。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

确保这不是从您的 DNS 发生的。例如，Cloudflare 有它，您可以在其中打开开发模式，在其中强制清除样式表和图像，因为 Cloudflare 提供加速缓存。这将禁用它并强制它在每次有人访问您的网站时进行更新。

score 1 · Accepted Answer

代替 html-head 中的链接标签到外部 css 文件，使用 php-include：

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

有点黑客，但对我有用:)

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

Try clearing your browsers cache.

于 2012-07-13T16:18:39.263 回答

score 0 · Accepted Answer

0

You can turn off caching with Firefox's web developer toolbar.

于 2012-07-13T16:19:50.080 回答

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

推荐以下响应头：

Cache-Control: must-validate

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

此方案在 Windows 上的 Chrome、Firefox 和 Edge 以及 Android 上的 Chrome 中运行良好，但令我惊讶的是，它并不总是适用于 Android 上的网络客户端。所以我或多或少地在寻找使用javascript强制/触发更新的东西——最好不需要重新加载页面。

score -1 · Accepted Answer

尝试这个：

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

如果您在“？”之后需要一些东西每次访问页面时都会有所不同，然后time()就会这样做。将其永久保留在您的代码中并不是一个好主意，因为它只会减慢页面加载速度并且可能没有必要。

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

javascript - 强制浏览器刷新 CSS、JavaScript 等

18 回答 18

General solution

PHP

Chrome

Firefox

Related