如何始终获取CSS而不使用缓存副本？
如何始终获取CSS而不使用缓存副本？
提问于 2015-11-14 00:37:01
使用HTML5+CSS3+jQuery。
因为我经常更改我的CSS文件，所以我想强制用户的浏览器总是获取CSS文件，而不是使用缓存的版本。
我发现我应该写这样的东西：
<link rel="stylesheet" type="text/css" href="index.css?t=[...some unique id...]"/> 如何自动生成这样的唯一Id？(可能是当前时间？)
谢谢
回答 3
Stack Overflow用户
发布于 2015-11-14 00:44:33
如果您的CSS很小并且是动态的，那么最好的解决方案就是使用<style>标记将其内联地注入到<head>中：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
这样，您的样式将在每次页面刷新时更新，您将不需要等待额外的http请求。
例如，如果样式表如下所示：
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}你的html看起来像这样：
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h1>My Page</h1>
</body>
</html>将css更改为如下所示：
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}html看起来像这样：
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<style>
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
</style>
</head>
<body>
<h1>My Page</h1>
</body>
</html>如果index.css的所有内容经常更改，则可以完全删除该文件并删除link标记。
Stack Overflow用户
发布于 2015-11-14 00:47:39
您可以使用服务器时间戳
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />一个更好的想法是使用css的一个版本：
<link rel="stylesheet" type="text/css" href="style.css?version=<?php echo $CSS_VERSION; ?>" />Stack Overflow用户
发布于 2015-11-14 02:00:13
对于您的特定问题，您可以使用ticks通过javascript注入链接。在本例中，代码将插入css作为最后处理的样式集。不过，我建议您在后端执行此操作。
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var sourceName = 'test.css?v=' + ((new Date().getTime() * 10000) + 621355968000000000); // using ticks
var linkElement = document.createElement('link');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('href', sourceName);
document.getElementsByTagName('head')[0].appendChild(linkElement);
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>我在发布之前对其进行了测试，并通过了各种方法。许多人没有执行href更改。它似乎只有在被注入到DOM中时才能执行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33697577
复制相关文章
相似问题
腾讯云开发者
