我正在学习开发xhtml、css网页。经常我在CSS中进行更改,但由于浏览器缓存,它不会反映在页面上,如果我手动清除缓存,它就会显示最新的代码效果。有没有什么方法可以在代码中加入来防止浏览器缓存?请给予任何建议。
我正在学习开发xhtml、css网页。经常我在CSS中进行更改,但由于浏览器缓存,它不会反映在页面上,如果我手动清除缓存,它就会显示最新的代码效果。有没有什么方法可以在代码中加入来防止浏览器缓存?请给予任何建议。
您可以通过JavaScript或服务器端代码向样式表URL附加一个随机查询参数。这不会改变要加载的CSS文件,但它将防止缓存,因为浏览器检测到不同的URL并且不会加载缓存的样式表。
<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
您可以创建一个具有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%>" />
<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"/>
#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 语法只是 C# 6 可能的一种简写方式,其等同于 someProperty { get { return ... ;} }
2)在 Content/_Layout.cshtml 文件中,我曾使用以下代码来在页面页脚显示构建编号和构建日期(基于 web 应用程序的主要程序集):
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,这通常是不需要的,特别是如果您已经将新的Web应用程序构建推送到Web服务器而不是单个页面更改(这样您就可以访问可注入到URL中的构建号)。
请注意,要实现自动递增生成版本号,在Properties/AssemblyInfo.cs中,我使用了以下代码(请参见如何在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
不要使用HTML编写<link>
标签,而是使用PHP代码。在<link>
标签的结尾处使用PHP mt_rand()
函数,它会生成一个随机数,因此您的样式表将永远不会被缓存。
<?php
echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_rand().">";
?>
这可以通过 .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>
您可以在链接中使用随机版本ID。例如,使用以下内容:
<link href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%> rel="stylesheet" type="text/css"/>
其中myStyle.css是样式表文件,DateTime.Now.ToString("yyyyMMddhhmmss")函数用于生成随机不同的版本ID。通过使用此随机版本ID,浏览器强制重新加载您的CSS。
F5
,Ctrl+R
或 GUI Refresh button
可能不会改变任何内容。考虑按(Google Chrome) Shift+F5
,Ctrl+Shift+R
或 Shift+ GUI Refresh button
。另外,您真的会直接要求用户强制清除缓存吗?更多信息:https://www.ghacks.net/2018/01/24/google-chrome-hard-reload-vs-normal-reload/#:~:text=You%20activate%20the%20function%20with,from%20the%20web%20page%20again 取决于浏览器。 - Artfaith