在前端開發中,我們經常遇到這樣的情況:在修改了 CSS 文件之后,我們刷新瀏覽器,卻發現樣式并沒有更新。這時候,我們就需要清除瀏覽器緩存中的 CSS 文件。
一種解決方案是在 CSS 文件 URL 的末尾加上一個參數,這個參數每次修改 CSS 文件時自增,這樣瀏覽器就會下載一個新的 CSS 文件。下面是一個使用純 JavaScript 實現去除瀏覽器緩存 CSS 文件的代碼:
function removeCSSCache() { var links = document.getElementsByTagName('link'); var head = document.getElementsByTagName('head')[0]; for (var i = 0; i< links.length; i++) { var link = links[i]; if (link.rel === 'stylesheet') { link.href = link.href + '?v=' + new Date().getTime(); head.appendChild(link.cloneNode(true)).parentNode.removeChild(link); } } } removeCSSCache();
代碼中,首先獲取了頁面中所有的 link 元素,找到 rel 屬性為 stylesheet 的元素,然后在鏈接末尾添加一個參數 v,值為當前時間戳,最后將修改后的 link 元素添加至頭部并移除原有元素,即可達到清除緩存的目的。
這是一個簡單實用的方法,可以讓我們在開發中更加方便地調試 CSS 樣式。