如何始终获取CSS而不使用缓存副本
How to always fetch CSS and not use cached copy?
使用HTML5+CSS3+jQuery。
由于我经常更改我的CSS文件,我想强制用户的浏览器始终获取CSS文件,而从不使用缓存版本。
我发现我应该写这样的东西:
<link rel="stylesheet" type="text/css" href="index.css?t=[...some unique id...]"/>
如何自动生成这样的唯一Id?(可能是当前时间?)
感谢
您可以使用服务器时间戳
<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; ?>" />
如果您的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
标记。
对于您的特定问题,您可以使用tick通过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时才能执行。
相关文章:
- 如何在从浏览缓存加载页面时执行javascript
- ReactJS和SpringDataRest缓存问题可能与websocket有关
- 缓存谷歌地图数据
- 防止jQuery Mobile中的ajax缓存
- image.onload事件和浏览器缓存
- Javascript清除缓存以清除基本身份验证凭据
- 使用jquery.load('pageName')方法时,未从应用程序缓存加载Html页
- 将脚本缓存到本地存储的basket.js概念仍然是一个好主意吗
- 阻止选项卡缓存jquery ui
- 强制浏览器更新缓存的HTML5视频对象
- 处理一个JSON文件;完全相同的副本不是
- 在Javascript中使用全局变量作为缓存是很好的
- 缓存!saveLocations()和addLocation()函数有什么区别
- 微软边缘浏览器缓存中的RESTful Angular应用程序
- 浏览器坚持使用旧的html和JS缓存
- 浏览器是否持久缓存脚本元素的编译版本
- 登录后重定向,缓存页面问题-Javascript
- 如何始终获取CSS而不使用缓存副本
- 当客户端通过点击后退按钮进入页面时,如何使其加载新副本而不是缓存的副本
- Safari/Webkit的后退按钮从缓存加载页面,而不是一个新的副本