强制浏览器刷新 css、javascript 等
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11474345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force browser to refresh css, javascript, etc
提问by user1511579
I'm developing a website based on Wordpress source code through XAMPP. Sometimes I change the CSS code, scrips or something else and I notice my browser takes time to apply the modifications. This leads me to use multiple browsers to refresh one and if doesn't apply the new styles I try the second one and it's always this.
我正在通过 XAMPP 开发基于 Wordpress 源代码的网站。有时我更改 CSS 代码、脚本或其他东西，我注意到我的浏览器需要时间来应用修改。这导致我使用多个浏览器来刷新一个，如果不应用新样式，我会尝试第二个，并且总是这样。
There is some way of avoiding this problem? Sometimes I'm changing code without notice the previous modifications.
有什么办法可以避免这个问题吗？有时我会在没有注意到之前的修改的情况下更改代码。
回答by Bojangles
General solution
通用解决方案
Pressing Ctrl+ F5(or Ctrl+ Shift+ R) to force a cache reload. I believe Macs use Cmd+ Shift+ R.
按Ctrl+ F5（或Ctrl+ Shift+ R）强制重新加载缓存。我相信，苹果电脑使用Cmd+ Shift+ R。
PHP
PHP
In PHP, you can disable the cache by setting the expiration date to a time in the past with headers:
在 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
铬合金
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:
Chrome 的缓存可以通过打开开发者工具来禁用F12，点击右下角的齿轮图标并在设置对话框中选择禁用缓存，如下所示：
Image taken from this answer.
取自这个答案的图片。
Firefox
火狐
Type about:configinto the URL bar then find the entry titled network.http.use-cache. Set this to false.
about:config在 URL 栏中键入，然后找到标题为 的条目network.http.use-cache。将此设置为false。
回答by F0G
If you want to avoid that on client side you can add something like ?v=1.xto css file link, when the file content is changed. for example if there was <link rel="stylesheet" type="text/css" href="css-file-name.css">you can change it to <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">this will bypass caching.
如果您想在客户端避免这种情况，您可以在?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">这将绕过缓存。
回答by Mageek
If you can write php, you can write:
如果你会写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(); ?>" />
It will always refresh!
它会一直刷新！
EDIT: Of course, it's not really practical for a whole website, since you would not add this manually for everything.
编辑：当然，这对于整个网站来说并不实用，因为您不会为所有内容手动添加它。
回答by Michael Mulikita
Check this: How Do I Force the Browser to Use the Newest Version of my Stylesheet?
检查这个：如何强制浏览器使用我的样式表的最新版本？
Assumming your css file is foo.css, you can force the client to use the latest version by appending a query string as shown below.
假设您的 css 文件是foo.css，您可以通过附加如下所示的查询字符串来强制客户端使用最新版本。
<link rel="stylesheet" href="foo.css?v=1.1">
回答by ePi272314
Developer point of view
If you are in development mode (like in the original question), the best approach is to disable caching in the browser via HTML meta tags. To make this approach universal you must insert at least three meta tags as shown below.
开发人员的观点
如果您处于开发模式（如在原始问题中），最好的方法是通过 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" />
In this way, you as a developer, only need to refresh the page to see the changes. But do not forget to comment that code when in production, after all caching is a good thing for your clients.
这样，您作为开发人员，只需刷新页面即可查看更改。但是不要忘记在生产中注释该代码，毕竟缓存对您的客户来说是一件好事。
Production Mode
Because in production you will allow caching and your clients do not need to know how to force a full reload or any other trick, you must warranty the browser will load the new file.
And yes, in this case, the best approach I know is to change the name of the file.
生产模式
因为在生产中您将允许缓存并且您的客户不需要知道如何强制完全重新加载或任何其他技巧，所以您必须保证浏览器将加载新文件。是的，在这种情况下，我知道的最佳方法是更改文件名。
回答by AllenBooTung
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
It will refresh if modify.
修改后会刷新。
回答by Sean
Make sure this isn't happening from your DNS. For example Cloudflare has it where you can turn on development mode where it forces a purge on your stylesheets and images as Cloudflare offers accelerated cache. This will disable it and force it to update everytime someone visits your site.
确保这不是从您的 DNS 发生的。例如 Cloudflare 有它，您可以在其中打开开发模式，它会强制清除您的样式表和图像，因为 Cloudflare 提供加速缓存。这将禁用它并强制它在每次有人访问您的网站时更新。
回答by Keyslinger
This Firefox extension was the only solution I could get to work: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
这个 Firefox 扩展是我可以开始工作的唯一解决方案：https: //addons.mozilla.org/en-us/firefox/addon/css-reloader/
回答by Steve Cooke
The accepted answer above is correct. If, however, you only want to reload the cache periodically, and you are using Firefox, the Web Developer tools (under the Tools menu item as of November 2015) provides a Network option. This includes a Reload button. Select the Reload for a once off cache reset.
上面接受的答案是正确的。但是，如果您只想定期重新加载缓存，并且您使用的是 Firefox，则 Web 开发人员工具（在 2015 年 11 月的工具菜单项下）提供了网络选项。这包括一个重新加载按钮。为一次性缓存重置选择重新加载。
回答by AgilePro
If you want to be sure that these files are properly refreshed by Chrome for all users, then you need to have must-revalidatein the Cache-Controlheader. This will make Chrome re-check files to see if they need to be re-fetched.
如果您想确保 Chrome 为所有用户正确刷新这些文件，那么您需要must-revalidate在Cache-Control标题中添加。这将使 Chrome 重新检查文件以查看它们是否需要重新获取。
Recommend the following response header:
推荐以下响应头：
Cache-Control: must-validate
This tells Chrome to check with the server, and see if there is a newer file. If there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.
这会告诉 Chrome 检查服务器，看看是否有更新的文件。如果有更新的文件，它会在响应中收到它。如果不是，它将收到 304 响应，并保证缓存中的响应是最新的。
If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will nevercheck with the server to see if there is a newer version.
如果您不设置此标头，则在没有任何其他使文件无效的设置的情况下，Chrome 将永远不会检查服务器以查看是否有更新的版本。
Here is a blog postthat discusses the issue further.
这是一篇博客文章，进一步讨论了这个问题。
