手机端检测代码上线更新，提醒用户刷新页面

最新推荐文章于 2022-05-13 12:00:17 发布

小曾小肉

最新推荐文章于 2022-05-13 12:00:17 发布

阅读量203

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_41559882/article/details/102792946

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

let url = location.host;
// 给个随机参数，防止接口拿的是本地缓存
url = url + "?temp=" + new Date(); 

// 拿到项目的index.html文件的代码
fetch(url)
	.then(response => {
		if(response.status >=200 && response.status<400) {
			return response;
		}	
	})
	.then(response => {
		// 将index.html文件里的代码字符串化
		return response.text() || "";
	})
	.then(text => {
		// 找到引入index.js的script标签，例如<script type="text/javascript" src="/index.d51b4b4b.js"></script>
		let newHash = (text.match(/<script src='index(.*).js/) || [])[1];
		
		let currentScripts = document.getElementbyTagName("script");
		// 找到引入index.js的script标签
		let currentScript = Array.prototype.find.call(currentScripts, item =>item.src.includes("index"));
		
		if (currentScript && currentScript.src.includes(newHash)) { // 当前hash与新请求的newHash不一样，说明代码已更改上线
			 // 提醒更新页面（即让用户刷新一下页面）
		}
	})
	.catch(err => {
		console.log("err", err);
	})