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