logo标签列表

我能否强制刷新我的样式表文件？

asp.netcss
29

我刚刚安静地度过了半天的疯狂。

我正在对Site.css文件中的类进行更改，但我的机器上正在开发的网站没有反映出来。因为我是在学习jQuery，并且正在使用addClass和removeClass玩耍，我正在动态创建这些调用的参数，所以我确定问题出在我的实现上。

结果发现浏览器中缓存了CSS文件，我只需要刷新一下就可以了...

有没有方法可以强制刷新（最好只在调试期间）？

13个回答
61

一种广泛使用的“缓存破坏”方式是在你的CSS源文件末尾添加参数。通常使用时间戳。我更喜欢使用“文件最后修改”时间，即PHP中的filemtime()函数。我相信在ASP.NET中也有类似的函数可以实现。

然后您的CSS标签会变成：

<link rel="stylesheet" type="text/css" media="screen" href="/main.css?123456789"/>

每当CSS文件更新时，查询参数会发生更改。

谢谢，完美地工作了，没有对功能产生任何影响。 - drzounds
21

按下CTRL+F5可以强制刷新您的网页，包括脚本和样式表。

此外，您可以将样式表包含在动态服务器页面[php/asp.net]中，并使用Response.Expires = -1强制客户端在每个HTTP-GET请求中显式加载CSS。您还可以在Web服务器设置中为CSS mime类型执行此操作。

@Mark：这个方法一直对我有效，而且在所有浏览器中都是一样的。 - this. __curious_geek
这可以强制文件更新，以避免缓存，但对于您的用户来说并不是永久性的解决方案。文件上次修改时间的最后更新Unix时间似乎是一个不错的解决方案。 - Luke
在Chrome/Windows中，您可以按F12打开开发者窗口。然后返回您的页面选项卡并右键单击重新加载（圆形箭头）图标，选择“清空缓存并强制重新加载”。然后关闭Dev窗口。比从设置中删除缓存要容易得多。 - dlchambers
12
我使用这个技巧：
<link rel="stylesheet" type="text/css" href="cssfile.css?t=<%= DateTime.Now.Ticks %>" media="screen" />
1
我在生产服务器上遇到了奇怪的行为。生成的HTML代码如下：<link rel="stylesheet" type="text/css" href="cssfile.css?t=<%= DateTime.Now.Ticks %>" media="screen" />。这仅适用于样式表 - 脚本正常工作。有什么建议吗？ - Muxa
9
这个回答的问题是它总是会强制你的客户端下载你的样式表，即使样式表在服务器上没有改变。被接受的答案更好，因为只有在样式表被修改时客户端才会重新下载它。 - Ian Kemp
@Muxa 你找到任何解决方案了吗？我也有同样的问题。 - Oliver
你可以这样写： href="css/style.css?t=<%= "" + DateTime.Now.Ticks %>" - raven_977
8

对于ASP.NET，可以将以下代码放在一个实用程序类或主页面中：

public static string GetTimestampedUrl(string virtualPath)
{
  var realPath = HostingEnvironment.MapPath(virtualPath);
  var file = new FileInfo(realPath);

  return VirtualPathUtility.ToAbsolute(virtualPath) + "?" + file.LastWriteTime.ToFileTime();
}

然后在您的页面中：

<link href="<%= GetTimestampedUrl("~/screen.css") %>" rel="stylesheet" type="text/css" media="screen" />
我喜欢你的解决方案，虽然它无法解决任何静态 .html 文件的问题，只适用于 as?x 文件。有趣的附注是：如果您尝试将上述代码实现为 MasterPage 或 Page 的扩展方法，则会失败。但是，如果您为页面创建一个基类并将其添加到其中，则可以正常工作。 - jrichview
另一个边缘情况的问题：如果您有任何动态修改标题中控件集合的代码，它将抛出 HttpException 80004005“Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %> )”。 - jrichview
1
使用您上面的方法，您可以为您的页面创建一个基类，并从OnLoad()重写中调用以下方法： private void SetHeaderTimestamps() { HtmlHead head = (HtmlHead)Page.Header; foreach (System.Web.UI.Control cntl in head.Controls) { if (cntl is HtmlLink) { HtmlLink cssTag = (HtmlLink)cntl; cssTag.Href = Utility.GetTimestampedUrl(cssTag.Href); } } } - jrichview
3
2

我的方法是使用“查询字符串更改”方法来绕过缓存（即使在浏览器和代理服务器中）。 由于我使用的是主控页，因此我像平常一样维护CSS链接，但添加了一个ID（此处命名为cssStyleSheet）：

<head runat="server">
<link id="cssStyleSheet" href="~/Styles/Default.css" rel="stylesheet" type="text/css" />

然后在代码后端，我实现了Page_Load中的这行代码，添加了一个查询字符串，像这样“?t=5343423424234”。

Protected Sub Page_Load(…)

    If IsNothing(Application("CSSTicks")) = True Then
        Application("CSSTicks") = DateTime.Now.Ticks
    End If


    cssStyleSheet.Attributes("href") = cssStyleSheet.Attributes("href") & "?t=" & Application("CSSTicks")

End Sub

为什么会这样呢？ 在HTML代码中，一些设计师可以轻松更改CSS文件，而不干扰某些“困难”的代码。 使用应用程序变量，我避免了从我的服务器和客户端（如使用移动设备）消耗带宽。 如果部署新应用程序，则应用程序变量将自动重置，并且“新”版本的CSS将通过代理下载到浏览器。
2
WordPress用户，以下是代码：
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url')."?d=".date( 'Ymd', time()); ?>" type="text/css" media="screen" />

或者更好的一个

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

Cheers!

2

我不确定所有浏览器，但在IE8中，您可以使用开发人员工具...

转到:

工具 -> 开发人员工具（F12）

然后（在您的页面上）在开发人员工具中:

缓存 -> 始终从服务器刷新

2
这是一个经典问题，有很多解决方案可供选择：
  1. 可能最简单的方法是配置您的Web服务器，将CSS文件设置为不缓存/立即过期。显然，您不希望在生产环境中这样做。使用IIS，这非常容易实现。
  2. 在包含的文件名中添加随机值，例如Site.css?v=12。这就是SO在其包含文件中所做的事情。我在内部这样做，以便在开发机器上，每次提供文件时参数都会更改（guid），但在部署时使用svn版本号。这个方法有些棘手，但更加健壮。
  3. 还有很多其他的解决方案，我相信。
我正在使用ASP.Net开发服务器。按照您的第一建议，有没有一种方法可以对其进行配置？ - GilShalit
1
最简单的方法是在您的浏览器中禁用缓存。如果您无法或不想这样做，可以按Ctrl + F5。
您的服务器或ASP应用程序可能也会进行缓存。您可以在web.config中禁用此功能，也可以重新启动开发服务器以确保向用户显示最新版本的文件。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接