27

我正在学习开发 xhtml、css 网页。我经常在 CSS 中进行更改，但由于浏览器缓存，它不会反映在页面上，如果我手动清除 cahceing，它会显示最新的代码效果。有什么我可以在代码中放入让浏览器不缓存东西的东西吗？请有任何建议

4

10 回答 10

56

您可以将随机查询参数附加到样式表 url（例如通过 javascript 或服务器端代码）。它不会更改正在加载的 css 文件，但会阻止缓存，因为浏览器检测到不同的 url 并且不会加载缓存的样式表。

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
于 2012-10-20T21:20:14.073 回答
8

您可以使用 GetVersion 方法创建类，该方法将返回您的应用程序版本（或例如构建号或构建日期）。

对于标记中的 asp.net 应用程序，您可以指定如下内容：

<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />

这将强制浏览器重新加载文件，因为静态文件的部分 URL 将在每次构建（或至少每个版本）时更改。

于 2012-10-20T21:21:26.693 回答
5

没有捕获：将可变字符串放在 css 路径的末尾，如下所示：

<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>

版本更改时刷新：

<link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>
于 2016-12-03T02:15:04.487 回答
4

如果您使用 Chrome 作为开发浏览器，则有 2 个选项：

1) 当您按住重新加载页面按钮一秒钟时，将出现一个菜单并提供重新加载硬页面的可能性。

2) 在 Inspector 设置中，您可以强制浏览器从不缓存文件。

在此处输入图像描述

我认为通过在浏览器上禁用缓存比在服务器配置中处理这个问题更容易、更快、更少麻烦。

于 2012-10-20T21:28:09.610 回答
1

您可以在链接中使用随机版本 ID。例如使用这个：

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

其中 myStyle.css 是样式表文件，而 DateTime.Now.ToString("yyyyMMddhhmmss") 函数用于生成随机的不同版本 ID。通过使用这个随机版本 ID，浏览器强制重新加载你的 CSS。

于 2017-01-05T06:34:48.853 回答
1

由于 ASP.net 标签也包含在问题中，我想扩展 Maxim Kornilov 的答案 ( https://stackoverflow.com/a/12992813/903783 ) 以及我如何使用他的想法制作 URL webapp-特定于 ASP.net MVC 的构建（他的示例使用 ASP/ASP.net WebForms 语法，而不是 MVC 和 Razor Pages 的较新 Razor 语法）：

1) 在 Global.asax.cs 中添加到 webapp 的主类（称为 MvcApplication）

#region Versioning

public static string Version => typeof(MvcApplication).Assembly.GetName().Version.ToString(); //note: syntax requires C# version >=6

public static DateTime LastUpdated => File.GetLastWriteTime(typeof(MvcApplication).Assembly.Location);

#endregion

someProperty => someReadOnlyExpression 语法只是 someProperty { get { return ... ;} } 自 C# 6 以来可能的简写

2）在其 Content/_Layout.cshtml 文件中，我曾经在页脚上显示构建号和构建日期时间（基于 webapp 的主程序集）：

Version @ViewContext.Controller.GetType().Assembly.GetName().Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", @File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))

我改成更简单的：

Version @somewebappname.MvcApplication.Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", somewebappname.MvcApplication.LastUpdated))

3）它通过_Layout.cshtml中的硬编码链接加载CSS（仍在重构它），我将其更改为：

<link href='@Url.Content("~/Content/Site.css?version=" + somewebappname.MvcApplication.Version)' rel="stylesheet" type="text/css" />

因此，如果在网页中单击鼠标右键并且他们确实查看了他们看到的源代码：

<link href='/Content/Site.css?version=2.1.5435.22633' rel="stylesheet" type="text/css" />

这就是 CSS url 是特定于版本的，这要归功于虚拟参数版本

如果使用随机数，它会在每次页面加载时获取 CSS，这通常是不希望的，特别是如果您已经将新的 webapp 构建而不是单独的页面更改推送到 Web 服务器（这样您就可以访问构建可以注入 URL 的数字）。

请注意，要实现内部版本号的自动递增，在 Properties/AssemblyInfo.cs 我有（请参阅How to have an auto incrementing version number (Visual Studio)?）：

// Version information for an assembly consists of the following four values:
//
//      Major Version
//      Minor Version 
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Revision and Build Numbers 
// by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
//[assembly: AssemblyFileVersion("1.0.*")] //don't use boh AssemblyVersion and AssemblyFileVersion with auto-increment
于 2019-10-18T10:29:06.763 回答
1

而不是使用 html 编写 <link>标签，只需使用 php 代码。最后的内部<link>标签使用 phpmt_rand()函数，该函数将产生一个随机数，因此您的样式表将永远不会被缓存。 <?php echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_rand().">"; ?>

于 2019-09-01T10:53:17.540 回答
0

这可以通过 .htaccess 文件完成。将此代码放在您网站根目录下名为 .htaccess 的文件中：

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
于 2012-10-20T21:18:32.280 回答
0

如果您在 Google Chrome 中，只需按 CTRL + F5 即可强制刷新。CSS 将更新为它在本地计算机或服务器上的状态。您也可以使用 .htaccess 文件，但这更像是对可能临时问题的永久解决方案。CSS 缓存有利于更快的页面加载，所以我不建议完全禁用它。

于 2021-01-27T21:48:46.833 回答
-4
  • 在chrome上按F12打开开发者工具
  • 然后右键单击重新加载按钮-单击（清除缓存和硬重新加载）
于 2012-10-20T21:15:05.937 回答