当前位置: 首页 > news >正文

网页的CSS和JavaScript文件没有自动更新, 解决办法

项目场景:

无人值守的场馆预定以及管理


问题描述

更新了CSS和JavaScript,访问始终样式不对


原因分析:

浏览器缓存了你的CSS和JavaScript文件

浏览器缓存了你的CSS和JavaScript文件。当文件的修改时间戳(last-modified)没有改变时,浏览器会认为它们是最新的,从而不会重新加载,如果修改了css和js都可能不自动加载,导致代码没有生效。


解决方案:

1、手动强制刷新  

2、代码设置,自动刷新

  1. 清除浏览器缓存:刷新页面并尝试清除浏览器缓存。在大多数浏览器中,可以在开发者工具中找到清除缓存的选项。

  2. 强制刷新页面:可以使用快捷键 Ctrl + F5(在Windows上)或 Cmd + Shift + R(在Mac上)强制刷新页面,这样可以确保浏览器不使用缓存的文件。

  3. 修改文件名:如果缓存问题仍然存在,可以通过修改CSS和JavaScript文件的名称来强制浏览器获取新的文件。例如,可以在文件名后加上版本号或时间戳。

  4. 设置HTTP头信息:可以通过设置HTTP头信息来控制浏览器缓存。在你的Web服务器配置中,可以设置Cache-Control 和 Expires 头部,指示浏览器如何缓存文件。

  5. 添加版本号:在引用CSS和JavaScript文件的URL后面加上查询字符串,例如?v=20230328,其中的数字或hash可以是文件的版本号或文件内容的hash。每次更新文件时,只需更改这个查询字符串的值,一般由低往高修改。

最终解决方案是添加版本号

<link rel = "stylesheet" href = "style.css?version=1.01"/><script type='text/javascript' src='../XXX.js?v=1.01'></script>

相关文章:

网页的CSS和JavaScript文件没有自动更新, 解决办法

项目场景&#xff1a; 无人值守的场馆预定以及管理 问题描述 更新了CSS和JavaScript&#xff0c;访问始终样式不对 原因分析&#xff1a; 浏览器缓存了你的CSS和JavaScript文件 浏览器缓存了你的CSS和JavaScript文件。当文件的修改时间戳&#xff08;last-modified&#xff…...

Go语言 获取服务器资源磁盘Disk情况

1、获取整个磁盘的总量、已使用量、使用率 package mainimport ("fmt""github.com/shirou/gopsutil/disk""log" )func main() {// 获取所有挂载点的磁盘使用率信息partitions, err : disk.Partitions(false)if err ! nil {log.Fatalf("Err…...

使用上海云盾 CDN 和 CloudFlare 后 Nginx、 WordPress、 Typecho 获取访客真实 IP 方法

最近因为被 DDoS/CC 攻击的厉害,明月就临时的迁移了服务器,原来的服务器就空置下来了,让明月有时间对服务器进行了重置重新部署安装生产环境。因为站点同时使用了上海云盾和 CloudFlare(具体思路可以参考【国内网站使用国外 CloudFlare CDN 的思路分享】一文)两个 CDN 服务…...

深入探究RTOS的任务调度

阅读引言&#xff1a; 此文将会从一个工程文件&#xff0c; 一步一步的分析RTOS的任务调度实现&#xff0c; 这里选用FreeRTOS分析&#xff0c; 别的也差不多的&#xff0c; 可能在细节上有少许不一样。 目录 1&#xff0c; 常见嵌入式实时操作系统 2&#xff0c; 任务调度的…...

【shell脚本速成】函数

文章目录 一、函数1.1、函数介绍1.2、函数定义1.3、函数调用 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &#x1f338;愿您在此停留的每一刻&#xf…...

拒绝零散碎片, 一文理清MySQL的各种锁

系列文章目录 学习MySQL先有全局观&#xff0c;细说其发展历程及特点 Mysql常用操作&#xff0c;谈谈排序与分页 拒绝零散碎片&#xff0c; 一文理清MySQL的各种锁&#xff08;收藏向&#xff09; 系列文章目录一、MySQL的锁指什么二、排他与共享三、全局锁&#xff08;Global…...

P5711 【深基3.例3】闰年判断

1. 题目链接 https://www.luogu.com.cn/problem/P5711 P5711 【深基3.例3】闰年判断 2. 题目描述 题目描述&#xff1a;判断一个数是否是闰年 输入&#xff1a;输入一个整数n 输出&#xff1a;输出1或0&#xff0c;如果是闰年&#xff0c;输出1&#xff0c;否则输出0 3. 我的…...

基于Raft算法实现的分布式键值对存储系统——学习笔记

目录 1 基于Raft算法实现的分布式键值对存储系统 1.1 模块 2 Raft 算法 2 .1 概念 2.2 raft角色&#xff08;先简单了解&#xff0c;方便后续阅读&#xff09; 2.3 raft想解决什么问题&#xff1f; 2.4 选举领导 2.5 领导者故障 附录&#xff1a; 参考文献&#xff1…...

秋招突击——6/17——复习{整理昨天的面试资料}——新作{删除链表倒数第n个节点}

文章目录 引言复习新作删除链表倒数第N个节点题目描述个人实现参考实现 总结 引言 主管面&#xff0c;面的很凄惨&#xff0c;不过无所谓了&#xff0c;我已经尽力了。上午都在整理的面经&#xff0c;没有复习算法&#xff0c;而且这两天要弄一下论文&#xff0c;二十号就要提…...

宝塔面板使用技巧(pure-FTP)上传文件和文件夹默认权限644的修改

前言 科技在进步各种各样的开源软件和库让我们应接不暇&#xff0c;我估计现在所有做php开发的人员都知道宝塔面板&#xff0c;我就经常用&#xff0c;但是不知道大家出现过一个问题不就是在我们开发过程中需要实时的给服务器上传我们开发的文件那么就涉及到了宝塔自带的pure-F…...

mac m芯片安装win11遇坑

mac m芯片安装win11遇坑 1、下载arm架构镜像 磁力链接&#xff1a; magnet:?xturn:btih:e8c15208116083660709eac9aee124e025c01447&dnSW_DVD9_Win_Pro_11_22H2_64ARM_ChnSimp_Pro_Ent_EDU_N_MLF_X23-12755.ISO&xl57198960642、使用VMWare Fusion安装&#xff0c;启…...

一个自定义流程的平台

脚本语言使用的是C#&#xff0c;当用户发布一个新的流程时&#xff0c;会把C#的脚本编译成dll&#xff0c;然后添加到微服务中&#xff0c;因为有了硬编译&#xff0c;所以执行速度是非常快的。逻辑脚本支持调试&#xff0c;可以断点和逐行调试。平台提供了调试工具&#xff0c…...

舔狗日记Puls微信小程序源码

源码介绍&#xff1a; 这是一款舔狗日记Puls微信小程序源码&#xff0c;提供每日一舔的功能&#xff0c;让你舔到最后&#xff0c;什么都有&#xff01; 源码通过API获取一些舔狗日记&#xff0c;内置了100多句舔狗日记&#xff0c;让你摆脱上班摸鱼的无聊时光&#xff0c; …...

PyMuPDF 操作手册 - 05 PDF的OCR识别等

文章目录 六、PyMuPDF的OCR识别6.1 使用 Tesseract进行OCR6.2 使用MuPDF进行OCR6.3 使用 Python 包easyocr进行OCR识别6.4 使用 Python ocrmypdf包进行OCR识别6.5 将图像批量OCR并转换为PDF七、PDF附加、嵌入、批注等7.1 附加文件7.2 嵌入文件7.3 从文档中获取所有批注六、PyMu…...

Vue与TypeScript的配合:如何在Vue项目中使用TypeScript,利用静态类型提高代码的可维护性

环境搭建: 在你的 Vue 项目中使用 TypeScript,使你的代码具有静态类型检查、IDE 的类型提示等有益的功能。以下是搭建 Vue 和 TypeScript 的开发环境的步骤: 创建一个项目 使用 Vue CLI 创建一个新的Vue项目是最简单的方法: vue create my-project 在出现的提示中,选择…...

华为仓颉语言介绍

文章目录 1.简介2.初识仓颉语言3.基本概念3.1标识符3.2程序结构3.3变量3.4表达式3.4.1if 表达式3.4.2while语句3.4.3do-while表达式3.4.4 for-in 表达式3.4.5 where条件3.4.6 break和continue 3.5 函数 1.简介 随着万物互联以及智能时代的到来&#xff0c;软件的形态将发生巨大…...

《昇思 25 天学习打卡营第 3 天 | 张量 Tensor 》

《昇思 25 天学习打卡营第 3 天 | 张量 Tensor 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 感觉像是在 学习高数一样 张量 Tensor 张量是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。 张量&#xf…...

free命令——显示系统内存使用情况

free命令的功能是显示系统内存使用情况&#xff0c;包含物理内存和交换内存的总量、使用量和空闲量。 语法格式&#xff1a;free [选项] 常用选项及含义 选项含义-b以字节B为单位显示内存和交换内存的容量使用情况-k以KB为单位显示内存和交换内存的容量使用情况-m以MB为单位…...

麒麟移动运行环境(KMRE)——国内首个开源的商用移固融合“Android生态兼容环境”正式开源

近日&#xff0c;由麒麟软件研发的KMRE&#xff08;Kylin Mobile Runtime Environment&#xff0c;麒麟移动运行环境&#xff09;在openKylin&#xff08;开放麒麟&#xff09;社区正式发布&#xff0c;为Linux桌面操作系统产品提供了高效的Android运行环境解决方案。这也是国内…...

print(“{}{}“.format())

print("{}{}".format()) 是 Python 中用于格式化字符串并将其输出到控制台的一种方法。format 方法允许你在字符串中插入变量或表达式的值&#xff0c;并以指定的格式显示它们。 基本语法 print("format_string".format(value1, value2, ...))format_str…...

抖音图片怎么去水印?2026年在线去水印工具+方法盘点,总有一款适合你

开篇&#xff1a;为什么要去水印&#xff1f; 保存抖音图片时&#xff0c;总会遇到水印的困扰。这些水印包含抖音logo、发布者名称&#xff0c;有时还会有账号信息。对于自媒体创作者、内容整理者或普通用户来说&#xff0c;去除水印往往是必需的。本文将介绍当下最实用的抖音图…...

Netgear路由器急救指南:nmrpflash如何让变砖设备重获新生

Netgear路由器急救指南&#xff1a;nmrpflash如何让变砖设备重获新生 【免费下载链接】nmrpflash Netgear Unbrick Utility 项目地址: https://gitcode.com/gh_mirrors/nmr/nmrpflash 当你心爱的Netgear路由器因为固件升级失败、意外断电或其他原因变成一块"砖头&q…...

网盘下载新革命:九大平台一键直链,告别客户端束缚

网盘下载新革命&#xff1a;九大平台一键直链&#xff0c;告别客户端束缚 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘…...

防火门安装与验收要点|闭门器、密封条、顺序器缺一不可

防火门安装与验收要点一、必备配件&#xff08;缺一不可&#xff09;闭门器&#xff1a;自动关门&#xff0c;火灾常态闭合防火密封条&#xff1a;遇火膨胀&#xff0c;隔烟阻火顺序器&#xff1a;双扇门专用&#xff0c;保证先后闭合二、安装要点门框墙体嵌实牢固&#xff0c;…...

开源机械爪控制库:从PID算法到ROS集成的全栈开发指南

1. 项目概述&#xff1a;一个开源的机械爪设计与控制库最近在机器人硬件开发的圈子里&#xff0c;开源项目“MeyerZhou/openclaw”引起了不少创客和机器人爱好者的注意。简单来说&#xff0c;这是一个专注于机械爪&#xff08;或称机械手、夹爪&#xff09;设计与控制的代码库和…...

Wand-Enhancer终极指南:免费解锁WeMod专业功能的完整解决方案

Wand-Enhancer终极指南&#xff1a;免费解锁WeMod专业功能的完整解决方案 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 还在为WeMod专业版的高昂订阅费…...

All in Token,百度李彦宏指出:Token经济,阿里,百度,腾讯,字节,移动,电信,联通,华为,开启新的Token战争

当AI作为生产力已经成为确定性命题&#xff0c;我们当下应该如何衡量一家AI企业的价值&#xff1f;是看大模型跑分刷榜的能力&#xff0c;还是用户每天消耗的token数量&#xff1f;5月13日的Create2026大会上&#xff0c;百度创始人李彦宏提出了一个全新标准——DAA&#xff0c…...

NS-USBLoader:Switch游戏管理终极指南 - 如何实现一键安装与系统引导?

NS-USBLoader&#xff1a;Switch游戏管理终极指南 - 如何实现一键安装与系统引导&#xff1f; 【免费下载链接】ns-usbloader Awoo Installer and GoldLeaf uploader of the NSPs (and other files), RCM payload injector, application for split/merge files. 项目地址: ht…...

别再点‘忽略’了!开机弹出Visual C++ Runtime Library错误的终极排查指南(附Adobe软件关联排查)

Visual C Runtime Library错误&#xff1a;从崩溃到根治的全链路解决方案 每次开机时那个刺眼的Visual C Runtime Library错误弹窗&#xff0c;就像一位不请自来的访客&#xff0c;固执地打断你的工作节奏。对于依赖Adobe Creative Cloud或达芬奇等创意工具的专业人士来说&…...

时空镜像立体成像楼宇全态透明智慧管控技术解析方案

时空镜像立体成像楼宇全态透明智慧管控技术解析方案一、方案概述当前传统楼宇管控普遍存在二维监控信息碎片化、空间感知能力薄弱、人员定位依赖外设、跨镜头轨迹断裂、身份核验存在漏洞、设备运维滞后、区域管控存在盲区等行业共性痛点&#xff0c;多数系统仅实现视频录像与基…...