哪些大型网站有做互联网金融,温江 网站建设,百度推广需要多少钱,云南百度公司思路#xff1a;无论vue还是react打包都会有dist文件夹#xff0c;内部有index.html。我是想根据index.html中的script src地址是否改变#xff0c;判断项目是否有新内容。
具体代码如下
首先先拿到生产环境中index.html文本#xff0c;由于是单页面应用使用fetch(/?_st…思路无论vue还是react打包都会有dist文件夹内部有index.html。我是想根据index.html中的script src地址是否改变判断项目是否有新内容。
具体代码如下
首先先拿到生产环境中index.html文本由于是单页面应用使用fetch(/?_stampDate.now())来拿到html文本。并获取所有的src地址。
const scriptReg /\script.*src[](?src[^])/gm;async function getScriptSrcs() {const html await fetch(/?_timestamp Date.now()).then((res) res.text(),);scriptReg.lastIndex 0;let result [];let match;while ((match scriptReg.exec(html))) {result.push(match.groups.src);}return result;
}
全局定义lastSrcs表示旧的地址数组然后和新的newScripts对比如果长度不同或者某一项不同则表示项目有新内容更新。
async function needUpdate() {const newScripts await getScriptSrcs();if (!lastSrcs) {lastSrcs newScripts;return false;}let result false;if (lastSrcs.length ! newScripts.length) {result true;}for (let i 0; i lastSrcs.length; i) {if (lastSrcs[i] ! newScripts[i]) {result true;break;}}lastSrcs newScripts;return result;
}
最终我们使用轮询的方式监听是否变化。
const autoRefresh(){setTimeout(async(){const willUpdate await needUpdate();if (willUpdate) {const result confirm(页面有更新请刷新页面);if (result) {location.reload();}}autoRefresh();},5000);
}
最后在main.ts中引入即可。有什么问题私信哦。
后续我想加一个可以自动关闭的功能但是使用window.confirm我无法实现尝试使用alert也无法成功然后就想到是不是可以重写这个alert,结果发现果然可以。代码如下直接复制即可使用需要在入口文件引入。
let lastSrcs;
let timeoutId: any 0;
let strHtml,time 5,timer null,timer1 null;
const scriptReg /\script.*src[](?src[^])/gm;async function getScriptSrcs() {const html await fetch(/?_timestamp Date.now()).then((res) res.text(),);scriptReg.lastIndex 0;let result [];let match;while ((match scriptReg.exec(html))) {result.push(match.groups.src);}return result;
}
async function needUpdate() {const newScripts await getScriptSrcs();if (!lastSrcs) {lastSrcs newScripts;return false;}let result false;if (lastSrcs.length ! newScripts.length) {result true;}for (let i 0; i lastSrcs.length; i) {if (lastSrcs[i] ! newScripts[i]) {result true;break;}}lastSrcs newScripts;return result;
}function createMask() {var shield document.createElement(DIV);shield.id shield;shield.style.position absolute;shield.style.left 0px;shield.style.top 0px;shield.style.width 100%;shield.style.height document.body.scrollHeight px;shield.style.background transparent;shield.style.textAlign center;shield.style.zIndex 10000;shield.style.filter alpha(opacity0);document.body.appendChild(shield);return shield;
}function createAlert(txt) {var alertFram document.createElement(DIV);alertFram.id alertFram;alertFram.style.position absolute;alertFram.style.left 50%;alertFram.style.top 0;alertFram.style.background #fff;alertFram.style.transform translateX(-50%);alertFram.style.width 450px;alertFram.style.height 150px;alertFram.style.textAlign center;alertFram.style.lineHeight 150px;alertFram.style.zIndex 10001;strHtml ul stylelist-style:none;margin:0px;padding:0px;width:100%;border-radius:10px;overflow:hidden;box-shadow:0 0 5px 5px #ccc\n;strHtml li stylebackground:#1677ff;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:40px;line-height:40px;color:#fff系统提示/li\n;strHtml li id_content stylebackground:#fff;text-align:center;font-size:14px;height:100px;line-height:100px; txt /li\n;strHtml li stylebackground:#fff;text-align:right;font-weight:bold;height:50px;line-height:25px;padding-bottom:10px ;padding-right:20px;input typebutton id_btn_click styleoutline:none;cursor:pointer;border:0;width:70px;height:40px;border-radius:20px;background:#1677ff;color:#fff value确 定//li\n;strHtml /ul\n;alertFram.innerHTML strHtml;document.body.appendChild(alertFram);return alertFram;
}function removerDom(alertFram, mask) {document.body.removeChild(alertFram);document.body.removeChild(mask);window.location.reload();
}function controlTime(alertFram, mask) {timer1 setInterval(() {time - 1;document.getElementById(_content).textContent 页面有更新${time}秒后将强制刷新页面;if (time 0) {clearTimeout(timer1);removerDom(alertFram, mask);}}, 1000);
}window.alert function (txt) {const alertFram createAlert(txt);const mask createMask();controlTime(alertFram, mask);const dom document.getElementById(_btn_click);dom.onclick () {removerDom(alertFram, mask);};
};const duration 5000;function autoRefresh() {timer setTimeout(async () {const willUpdate await needUpdate();let content 页面有更新${time}秒后将强制刷新页面;if (willUpdate) {clearTimeout(timer);alert(content);} else {autoRefresh();}}, duration);
}
const env process.env.UMI_ENV;env production autoRefresh();
