欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

.html文件防止script腳本緩存的三種方法

 更新時(shí)間：2024年01月19日 10:54:54   作者：柯爾茶  
現(xiàn)在有這樣一個(gè)問(wèn)題,由于一些原因,我們經(jīng)常需要修改gTool的代碼然后上傳更新cdn,但是用戶通過(guò) html 文件訪問(wèn)的 gTool 鏈接實(shí)際上還是緩存的,所以現(xiàn)在問(wèn)題就是如何禁止緩存,文中給大家介紹了三個(gè)方法供大家參考,需要的朋友可以參考下

場(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 開始，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)文章

最新評(píng)論