.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)在有這樣一個問題，由于一些原因，我們經(jīng)常需要修改 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 腳本已經(jīng)加載完了，可以繼續(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腳本緩存的三種方法的詳細內(nèi)容，更多關于.html防止script緩存的資料請關注腳本之家其它相關文章！
相關文章
Map 是 ES6 中新增的一種數(shù)據(jù)結(jié)構，與 Set 一起添加，其實功能都差不多。下面這篇文章主要給大家總結(jié)介紹了關于ES6學習教程之Map的常用方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
JavaScript 復制對象與Object.assign方法無法實現(xiàn)深復制
這篇文章主要介紹了JavaScript 復制對象與Object.assign方法無法實現(xiàn)深復制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
JavaScript具有一個非常有用的方法replace()，可以用它利用備選字符集途歡指定的字符，下面有個不錯的示例，大家可以嘗試操作下2013-10-10
原生JS實現(xiàn)動態(tài)添加新元素、刪除元素方法
這篇文章主要介紹了原生js實現(xiàn)動態(tài)添加新元素、刪除元素方法 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
生效時間不得大于失效時間在一些推銷、優(yōu)惠方面還是比較實用的，接下來一起看下詳細的實現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
這篇文章主要介紹了JS檢測移動端橫豎屏的代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
本文給大家介紹了JavaScript中的類型檢查的一些知識點,整理的非常詳細,推薦給大家,希望對大家學習JavaScript能夠所幫助2020-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日期時間篩選器，支持年月日時分，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS插件plupload.js實現(xiàn)多圖上傳并顯示進度條
這篇文章主要為大家詳細介紹了PHP結(jié)合plupload.js JS插件實現(xiàn)多圖上傳并顯示進度條加刪除實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
jquery根據(jù)錨點offset值實現(xiàn)動畫切換
點擊后僵硬的切換是不是很不爽，下面為大家介紹的是根據(jù)錨點offset值來實現(xiàn)動畫切換，喜歡的朋友不要錯過2014-09-09