加时间戳使js,css不缓存

最新推荐文章于 2025-07-04 14:52:40 发布

转载最新推荐文章于 2025-07-04 14:52:40 发布 · 1.6k 阅读

编程语言Java 专栏收录该内容

91 篇文章

订阅专栏

https://blog.youkuaiyun.com/xusongsong520/article/details/8009762

多Linux + Apache的服务器都会对CSS、JS和图片这些静态的内容设置缓存，到了IE这里又会在本地做一个缓存。所以当我们更新了CSS文件之后，常常会出现客户端没有更新，导致显示出现问题。之前我一直使用时间戳参数的方法来解决：

<link rel="stylesheet" type="text/css" href="common.css?time=20060408" />每次更改了css文件就把参数time的值设为更改当日的日期，这样本地IE就会把它当作一个新的文件更新一次。

但是在最近做的项目中发现一个比较奇怪的问题，服务器端做了gzip压缩，到客户端第一次解压的时候没问题，第二次访问的时候ie从cache里读文件就出问题了，只能读出前面大约一两千个字节。在两台win2000+ie6的机子上重现了这个问题，XP的还没有发现。

最终的解决方案是在时间戳参数后面再加上一个.css结尾，也就是这么写：

<link rel="stylesheet" type="text/css" href="common.css?time=20060408.css" />然后就一切正常了...

大概IE在从缓存里读文件的时候还得对文件扩展名做一个判断，所以这么加一下它就认了。我自己对这个解释不甚满意，所以如果你有标准答案麻烦留个言

当然js也可以用这种方法<script language="JavaScript" src="/flash/duilian.js?time=New Date()"></script>

https://blog.youkuaiyun.com/a352193394/article/details/7584430

在IE或者其他的很多浏览器中，如果你每次请求的地址是相同的，浏览器就不会去连接服务器而是去读取缓存，这

样对于很多应用来时是非常好的，可以降低服务器的压力或者减少带宽的使用，但是对于ajax应用，很多都是必须保持

时时的连接与服务器进行交互，所以需要使用一个小技巧，时间戳来使每次的请求地址都不同，从而跳过浏览器的缓存

机制实现每次的请求服务器，这样的功能在图片验证码的时候也是比较常用的一种方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
	<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		function test(){
			//1.获取文本框中的值
			var value = $("#userName").val();
			//2.将文本框中的内容发送给后台服务器
			var url = "/Ajax/servlet/AjaxServlet?name="+value;
			url = convertURL(url);
			alert(url);
			$.get(url,null,callback);
		}
		//给url地址增加时间戳，骗过浏览器，不读去缓存
		function convertURL(url){
			var timestmp = (new Date()).valueOf();
			//将时间戳追加到url上面
			url = url+ "&t=" +timestmp;
			return url; 
		}
		
		function callback(data){//回调函数
			//3.接受服务器的返回的数据
			//alert(data);
			//4.将结果显示在页面中
			$("#div1").html(data);
		}
	</script>
  </head>
  
  <body>
    用户名:<input type="text" id="userName" onblur="test();"/><span id="div1" style="color: red"></span>
	<br/>
    密码:<input type="password" id="password" /><br/>
    邮箱:<input type="text" id="mail" />
  </body>
</html>