如何便捷更新客户端浏览器缓存过的静态文件


遇到这样一个问题,网站每次部署新功能,前端js,css等静态文件均做了版本标记,用户通过浏览器浏览网页可以访问最新版本的静态文件,而css文件中涉及调用一张没有变更名称的图片,用户在访问页面的时候,就出现了图片缓存没有清理,最新图片没有更新的问题。

如果给每个图片设定版本的话应该可以解决这个问题,比如:

   
  background.png?v=2.0
 

但是操作起来比较麻烦,请问各位是否有更好的办法解决这个问题。

浏览器 php

无色D夜空 11 years, 9 months ago

原理就是通过ajax去请求服务器上的静态文件,并加上请求头If-Modified-Since和Cache-Control。

   
  $.ajax({
  
type: "GET",
url: "static/background.png",
dataType: "text",
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
}
});

这样浏览器就会把最新的文件替换掉本地旧文件。
也可以直接用jquery的ifModified和cache参数:

   
  $.ajax({
  
type: "GET",
url: "static/background.png",
dataType: "text",
cache:false,
ifModified :true
});

爱与世界和平 answered 11 years, 9 months ago

Your Answer