当前位置: 首页 > 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…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...