CSS 刷新样式文件条件与方法

概览

我们通常在前端修改界面样式后,会通过 Ctrl+F5 强制刷新以使用本地浏览器生效修改后的变化,但是有时这样刷新并不起效果,并且远程用户可能不会知晓网站界面样式做了更改,如果弹窗提示又影响用户体验,所使用的效果可能需要等久时间后才会在用户端变化,此时,我们只要在 CSS 样式文件加上更新参数即可实现在用户下次访问后立即生效修改后的样式。

一般我们会通过 link 标签的 href 属性来链接 CSS 文件,这时我们只需在 CSS 文件的 URL 后加以 ?upd202210021200 新值,使本地与服务器的 href 值不同,即可使本地缓存的 CSS 文件失效,从而迫使浏览器从服务器下载当前的样式文件。

更新

原文件

<link rel="stylesheet" href="//static.hexingxing.cn/v2/element/style/bootstrap@latest.min.css">

现文件

<link rel="stylesheet" href="//static.hexingxing.cn/v2/element/style/bootstrap@latest.min.css?upd202210021200">

以上建议只在修改后手工添加,这样即保持使用正常的本地缓存文件,同时在修改后能及时更新。

更多

如果有必要,实现动态更新 href 值也很简单,PHP 环境可以通过调用系统的时间值来达到每次访问都更新的效果。

<link rel="stylesheet" href="//static.hexingxing.cn/v2/element/style/bootstrap@latest.min.css?<?php echo "udp".date("YmdHis",time()+8*60*60); ?>">

给TA打赏
共{{data.count}}人
人已打赏
技术教程

前端 JavaScript 验证两次密码是否一致

2022-11-14 15:07:56

技术教程

深入理解下载方式:http/https、ftp/sftp、bt、magnet、ed2k

2022-11-14 15:11:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索