解决浏览器缓存问题

1.index.html文件meta标签添加属性

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" viewport-fit=cover  >

2.提前main.html处理逻辑再跳转到index.html页

<script>// 解决浏览器缓存function timestamp(url) {const getTimestamp = new Date().getTime()if (url.indexOf('?') > -1) {url = url + '×tamp=' + getTimestamp + '&loginType=' + loginType} else {url = url + '?timestamp=' + getTimestamp + '&loginType=' + loginType}return url}const getUrlParam = name => {const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')const value = window.location.search.substr(1).match(reg)if (value != null) {// 对参数值进行解码return decodeURIComponent(value[2])}return null}const loginType = getUrlParam('loginType')// console.log('main.html当前url链接地址:' + window.location.href)const url = './index.html'const newUrl = timestamp(url, loginType)window.open(newUrl, '_self')
</script>

3.动态加载文件

3.1 封装动态加载、移除文件方法
/*** 动态加载css文件* @param {*} url* @param {*} isCache*/
export function loadCSS(url, isCache = true) {let element = document.createElement('link')element.setAttribute('rel', 'stylesheet')element.setAttribute('type', 'text/css')if (isCache) {element.setAttribute('href', url + '?t=' + new Date().getTime())} else {element.setAttribute('href', url)}document.getElementsByTagName('head')[0].append(element)// document.head.appendChild(element)
}/*** 动态加载js文件* @param {*} src* @param {*} callback*   loadScript("",function(){*   console.log("加载成功")* })* var that = this; 在方法里面使用that*/
export function loadJS(jsUrl, callback, isCache = true) {const script = document.createElement('script')const head = document.headscript.type = 'text/JavaScript'if (isCache) {script.src = jsUrl + '?t=' + new Date().getTime()} else {script.src = jsUrl}if (script.addEventListener) {script.addEventListener('load', callback, false)}document.getElementsByTagName('head')[0].append(script)// head.appendChild(script)
}/*** 移除引用的JS/CSS文件* @param filename 文件名称* @param filetype 文件类型 js/css*/
export const removeFileJSandCSS = (filename, filetype) => {const targetElement = filetype === 'js' ? 'script' : filetype === 'css' ? 'link' : 'none'const targetAttr = filetype === 'js' ? 'src' : filetype === 'css' ? 'href' : 'none'const allSuspects = document.getElementsByTagName(targetElement)for (let i = allSuspects.length; i >= 0; i--) {if (allSuspects[i] &&allSuspects[i].getAttribute(targetAttr) != null &&allSuspects[i].getAttribute(targetAttr).indexOf(filename) != -1)allSuspects[i].parentNode.removeChild(allSuspects[i])}
}
3.2 页面引入
removeFileJSandCSS('nationality.js', 'js')
loadCSS('./jQuery/jquery-ui.min.css')
loadJS('./jQuery/jquery-ui.min.js', () => {})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/193618.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu下QT搭建Android开发环境

一、前言 用QT开发android和直接使用android开发的区别 使用Qt开发Android应用和直接使用Android开发工具&#xff08;例如Android Studio&#xff09;有一些区别&#xff0c;主要体现在开发工具、语言、界面设计和性能等方面&#xff1a; 开发工具&#xff1a; Qt Creat…

Python----字典练习

相关链接&#xff1a;Python---字典的增、删、改、查操作_python中字典的增删改查-CSDN博客 Python---字典---dict-CSDN博客 Python---引用变量与可变、非可变类型-CSDN博客 重点&#xff1a; 字典中的 key &#xff08;就是键&#xff09;可以是很多数据类型&#xff08;…

jmeter下载地址

Jmeter安装教程【5.5】【Windows】jmeter详细安装配置教程&#xff0c;装不好你打我_一只莽夫的博客-CSDN博客

Java线程池的使用和最佳实践

第1章&#xff1a;引言 处理并发问题时&#xff0c;如果每次都新建线程&#xff0c;那系统的压力得有多大&#xff1f;这时候&#xff0c;线程池就像一个英雄一样出现了&#xff0c;它帮我们有效地管理线程&#xff0c;提高资源利用率&#xff0c;降低开销。那么&#xff0c;为…

代理模式介绍(静态代理、jdk动态代理、cglib代理)

一、静态代理 &#xff08;一&#xff09;定义 1、定义 为其他对象提供一种代理以控制对这个对象的访问&#xff1b; 2、涉及到的角色 &#xff08;1&#xff09;抽象主题角色&#xff1a;真实主题和代理主题的共同接口&#xff0c;便于在使用真实主题的地方都可以使用代理…

C#网络编程System.Net.WebClient 类vs System.Net.Http.HttpClient 类

目录 一、WebClient 类 1.WebClient 将数据上传到资源的方法 2.WebClient 从资源下载数据的方法 3.示例源码 4.生成效果 二、HttpClient 类 1.示例源码 2.生成效果 为什么要把两者拿出来pk呢&#xff1f;那是因为WebClient已经在.NET 6.0以后得版本被弃用了&#xff0c…

python跑ncnn(验证模型是否转换成功)

为了转ncnn模型是否成功&#xff0c;用python验证一下先 pip install ncnn分割模型的验证代码 import ncnn import cv2 import numpy as np# 创建ncnn的网络对象 net ncnn.Net()# 加载ONNX模型 net.load_param(E:\\Android_Projects\\ncnn-android-deeplabv3plus-main\\app\…

Spring学习笔记:Day1

学习策略&#xff1a; 理论与实践相结合&#xff1a;每学完一个知识点&#xff0c;尝试进行小的练习或小的项目实践。 持续反馈&#xff1a;在学习过程中&#xff0c;参与社区、论坛或与同事进行讨论&#xff0c;及时解决遇到的问题。 实际项目驱动&#xff1a;在学习后期&a…

PHP字符串面试题

PHP字符串面试题 1. 创建一个字符串变量&#xff0c;并打印输出字符串的内容。 <?php $string "Hello, World!"; echo $string; ?>2. 如何获取字符串的长度&#xff1f; <?php $string "Hello, World!"; $length strlen($string); echo …

P1530 [USACO2.4] 分数化小数 Fractions to Decimals

题目描述 写一个程序,输入一个形如 DN​ 的分数,输出它的小数形式。如果小数有循环节的话,把循环节放在一对圆括号中。 例如,13=0.33333333…31​=0.33333333… 写成 0.(3)0.(3),41333=0.123123123…33341​=0.123123123… 写成 0.(123)0.(123),整数 x 写成 x.0。 输入…

Vue3父子组件通信

一、父组件给子组件传值 子组件 ShipHomePortDialog 1.定义变量名称 <script lang"ts" setup> const props defineProps([title]) </script> 2.在template中使用变量 <h4>{{ title }}</h4> 3.在Script代码使用 var t props.title…

鸿蒙开发笔记

最近比较火&#xff0c;本身也是做前端的&#xff0c;就抽空学习了下。对前端很友好 原视频地址&#xff1a;黑马b站鸿蒙OS视频 下载安装跟着视频或者文档就可以了。如果你电脑上安装的有node&#xff0c;但是开发工具显示你没安装&#xff0c;不用动咱们的node&#xff0c;直…

15个Pandas代码片段助力数据分析

大家好&#xff0c;Python的Pandas库是数据分析的基本工具&#xff0c;提供了强大的数据操作和分析功能。本文将探讨15个高级Pandas代码片段&#xff0c;这些代码片段将帮助简化数据分析任务&#xff0c;并从数据集中提取有价值的见解。 1. 过滤数据 import pandas as pd# 创…

红队攻防实战之Access注入

若盛世将倾&#xff0c;深渊在侧&#xff0c;我辈当万死以赴 访问漏洞url: 1.Access联合查询 判断是否有注入 and 11正常&#xff0c;and 12出错 判断字段数 order by 7正常 order by 8出错 爆破出表名并判断回显点为2&#xff0c;5 查看字段内容&#xff0c;将字段名填入回…

12月1号作业

实现运算符重载 #include <iostream>using namespace std; class Person{friend const Person operator-(const Person &L,const Person &R);friend bool operator<(const Person &L,const Person &R);friend Person operator-(Person &L,const …

WakaTime一个用于跟踪和分析编程时间的工具

WakaTime是一个用于跟踪和分析编程时间的工具&#xff0c;它可以集成到各种代码编辑器和集成开发环境中&#xff0c;例如Visual Studio Code、Sublime Text、PyCharm等。它可以帮助开发人员了解他们花费在不同项目和编程语言上的时间&#xff0c;以及他们的编码习惯和生产力。 …

C语言实战演练之贪吃蛇游戏

贪吃蛇游戏的C语言实现主要包括以下几个步骤&#xff1a; 1. 初始化游戏界面&#xff1a; 设置窗口大小&#xff0c;背景颜色等。 2. 创建蛇的数据结构&#xff1a; 包括蛇头的位置、蛇身的长度、蛇身的坐标等。 3. 创建食物的数据结构&#xff1a; 包括食物的位置等。 4. 控制…

【面试HOT200】二叉树——广度优先搜索篇

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于【CodeTopHot200】进行的&#xff0c;每个知识点的修正和深入主要参…

Leetcode 2952. Minimum Number of Coins to be Added

Leetcode 2952. Minimum Number of Coins to be Added 1. 解题思路2. 代码实现 题目链接&#xff1a;2952. Minimum Number of Coins to be Added 1. 解题思路 这一题思路上就是一个贪婪算法的思路&#xff0c;偏数学性多一点。 首先&#xff0c;我们将面值有序排列&#x…