.html文件防止script腳本緩存的三種方法
場(chǎng)景
我們有一個(gè)工具庫(kù)通過(guò) script 放在了全局中，它會(huì)提供一個(gè)帶有許多方法的全局對(duì)象 gTool。就像下面這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://xxxx/common/tool.min.js"></script> // [!code hl]
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
然后我們就可以在 main.ts 里能使用 gTool.jumpLink 方法啦。
gTool.jumpLink({})
問(wèn)題
但是現(xiàn)在有這樣一個(gè)問(wèn)題，由于一些原因，我們經(jīng)常需要修改 gTool 的代碼然后上傳更新 cdn。但是用戶通過(guò) html 文件訪問(wèn)的 gTool 鏈接實(shí)際上還是緩存的，根本不會(huì)去請(qǐng)求服務(wù)器，也就導(dǎo)致用戶的 gTool 版本可能過(guò)低 bug 沒(méi)有被修復(fù)。
所以現(xiàn)在問(wèn)題就是如何禁止緩存。
方法
這里我嘗試了 3 個(gè)方法
1 創(chuàng)建 script 標(biāo)簽并 appendChild 到 body
最終我選擇了這種方案，滿足需求并且上線后沒(méi)有問(wèn)題。
可以使用 js 動(dòng)態(tài)創(chuàng)建 script 節(jié)點(diǎn)并插入到 dom 中去。 但是需要注意動(dòng)態(tài)創(chuàng)建的 script 腳本是異步的，不會(huì)阻塞瀏覽器向下執(zhí)行 js。
下面這段代碼，永遠(yuǎn)都是 'body 執(zhí)行' 先于 'tool 腳本執(zhí)行' 打印。這樣就導(dǎo)致獲取不到全局的 gTool 對(duì)象，也就導(dǎo)致報(bào)錯(cuò)了。
<!DOCTYPE html>
<html>
<head>
<script>
var htmlScriptScript = document.createElement('script')
htmlScriptScript.type = 'text/javascript'
htmlScriptScript.src = 'https://xxxx/common/tool.min.js?a=' + Math.random()
htmlScriptScript.onload = function () {
console.error('tool 腳本執(zhí)行')
}
document.head.appendChild(htmlScriptScript)
</script>
</head>
<body>
<div id="app"><!--app-html--></div>
<script>
console.error('body 執(zhí)行')
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
為了保證 gTool 加載完成后才向下執(zhí)行腳本，我們可以自己寫一個(gè)阻塞函數(shù)。如下：
<!DOCTYPE html>
<html>
<head>
<script>
var htmlScriptScript = document.createElement('script')
htmlScriptScript.type = 'text/javascript'
htmlScriptScript.src = 'https://xxxx/common/tool.min.js?a=' + Math.random()
htmlScriptScript.onload = function () {
window.gTool = gTool
}
document.head.appendChild(htmlScriptScript)
</script>
</head>
<body>
<div id="app"><!--app-html--></div>
<script>
+ async function main() {
+ function awaitTool() {
+ return new Promise(resolve => {
+ const interval = setInterval(() => {
+ if (window.gTool) {
+ clearInterval(interval)
+ resolve(null)
+ }
+ }, 50)
+ })
+ }
+ await awaitTool();
+ // other code
+ }
+ main()
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
main() 函數(shù)會(huì)每隔 50ms 去檢查 window 上是否有 gTool 對(duì)象，有就說(shuō)明 gTool 腳本已經(jīng)加載完了，可以繼續(xù)往下執(zhí)行了，否則就繼續(xù)遞歸執(zhí)行 main()，知道 gTool 腳本加載完畢。
2 在地址后加一個(gè)隨機(jī)參數(shù)
并不是很好的解決方案。
這種方法雖然可行，但是每次都需要發(fā)版。因?yàn)榘l(fā)版需要走流程審核，而且有發(fā)版次數(shù)限制。
下面兩種引入方式都是一樣的，只不過(guò)第二種每次重新打包的時(shí)候會(huì)自動(dòng)刷新時(shí)間戳。
<script type="text/javascript" src="https://xxxx/common/tool.min.js?time=1124112341"></script> // [!code hl] <!-- 或者 --> <script type="text/javascript" src="https://xxxx/common/tool.min.js?time=<%=Math.random()%>"></script>
3 document.write()
這種方法不行。
使用 document.write API 來(lái)防止 .html 文件緩存 script 腳本。
在 MDN 里寫了，從 Chrome 55 開(kāi)始，Chrome（可能）不會(huì)運(yùn)行通過(guò) document.write() 注入的 <script>，以防止使用 2G 連接的用戶找不到 HTTP 緩存。所以這種方法用來(lái)動(dòng)態(tài)注入 <script> 腳本根本不可行。
<script>
document.write("<script src='https://xxxx/common/tool.min.js?rnd=" + Math.random() + "'></s " + " cript> ")
</script>
以上就是.html文件防止script腳本緩存的三種方法的詳細(xì)內(nèi)容，更多關(guān)于.html防止script緩存的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析
本文主要是分享了一段由JS生成驗(yàn)證碼并驗(yàn)證的代碼，非常簡(jiǎn)單，并分析了此方法的實(shí)用性，提供給大家參考下2014-09-09
利用JS實(shí)現(xiàn)一個(gè)同Excel表現(xiàn)的智能填充算法
這篇文章主要給大家介紹了關(guān)于利用JS實(shí)現(xiàn)一個(gè)同Excel表現(xiàn)的智能填充算法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)電子簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
用XMLDOM和ADODB.Stream實(shí)現(xiàn)base64編碼解碼實(shí)現(xiàn)代碼
用 XMLDOM 和 ADODB.Stream 實(shí)現(xiàn)base64編碼解碼實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
原生js仿jquery animate動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了原生js仿jquery animate動(dòng)畫(huà)效果，具有一定的，感興趣的小伙伴們可以參考一下2016-07-07
js+css實(shí)現(xiàn)扇形導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)扇形導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript實(shí)現(xiàn)樹(shù)的遍歷算法示例【廣度優(yōu)先與深度優(yōu)先】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)樹(shù)的遍歷算法,結(jié)合實(shí)例形式分析了javascript針對(duì)樹(shù)結(jié)構(gòu)的廣度優(yōu)先遍歷與深度優(yōu)先遍歷實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
一文徹底講通JavaScript普通函數(shù)與箭頭函數(shù)的區(qū)別
JavaScript中的箭頭函數(shù)和普通函數(shù)在語(yǔ)法和特性上有一些關(guān)鍵的區(qū)別,這篇文章主要介紹了JavaScript普通函數(shù)與箭頭函數(shù)區(qū)別的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-10-10
smartupload實(shí)現(xiàn)文件上傳時(shí)獲取表單數(shù)據(jù)(推薦)
這篇文章主要介紹了smartupload實(shí)現(xiàn)文件上傳時(shí)獲取表單數(shù)據(jù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11