时间戳

首页 > 解决方案 > 使用 PHP 强制更新之前版本的 css / javascript 的缓存

javascript - 使用 PHP 强制更新之前版本的 css / javascript 的缓存

问题描述

有很多关于如何防止用户的浏览器缓存旧版本的 JS 和 CSS 文件的问答。

对于网络应用程序的频繁用户，我希望缓存这些文件，但是当我更新 JS/CSS 内容时，我希望用户自动获取新版本。

毫无疑问，其他人也使用了类似的东西，但我不喜欢我发现的大多数建议，我想出了这个：

<?php $css_last_mod = filemtime("path_to/styles.css"); ?>
<link href="path_to/styles.css?v=<?php echo $css_last_mod; ?>" rel="stylesheet" />

将其包含在您的标头中，CSS 文件的最后修改时间戳只会在文件更新时更改。（从而向浏览器表明有新版本）

<link href="includes_public/styles.css?v=1579628430" rel="stylesheet">

当然，同样的概念也可以用于 JS 文件。

是否有任何已知的兼容性问题？

标签： javascriptphphtmlcss

解决方案

不，不存在兼容性问题；我对每个 webapp 都使用它，我没有问题。这是我的代码，我总是强制不缓存

<script type="text/javascript">
    var time = new Date();
    var js = ['a','c','d']; //this is my js files
    var style = ['s','mtto'];//this is my css files
    for(var i=0; i<js.length; i++){
        var js_element = document.createElement('script');
        js_element.src = 'js/'+js[i]+'.js?x='+time.getTime();
        document.head.appendChild(js_element);
    }
    for(var i=0; i<style.length; i++){
        var importedStyle = document.createElement('link');
        importedStyle.rel = 'stylesheet';
        importedStyle.href = ''+style[i]+'.css?x='+time.getTime();
        document.head.appendChild(importedStyle);
    }
</script>

推荐阅读