客戶端緩存腳本通常讓我們又愛又恨，愛他，是因為他確實可以有效防止相同的文件在客戶端和服務(wù)器之間傳來傳去，恨他，是因為當你真的需要更新他的時候，他可能不理會你的要求。

• 客戶端解決辦法

很多人直接在腳本后面加一個時間戳作為參數(shù)，當我們每次去獲取網(wǎng)頁的時候，都會在后面去增加一個時間戳，這樣腳本文件就會每次都回傳給瀏覽器，具體表現(xiàn)為你每次F5刷新頁面（不是CTRL+F5）的時候，返回狀態(tài)碼始終都是200。

當然，這么殘暴地寫，在一些企業(yè)內(nèi)網(wǎng)的環(huán)境，也沒什么大不了，但是還是很多人會有點兒潔癖。其實只要在每次變更的時候強制大家刷新一下，不是就可以了嗎？于是大家認為在后面加一個版本號，如v=2之類的，這樣只需要每次更新腳本后，在引用的頁面，更新這個v，就可以讓客戶端更新腳本了。

在這里，推薦大家用IE的F12開發(fā)者工具來抓網(wǎng)絡(luò)包，當然Fiddler等也都可以，不過確實在這件事上，一個是沒必要，一個可能Fiddler在修改IE端口指向8000之后可能會有問題。

回到話題，這里需要解釋一下瀏覽器對客戶端緩存看的是整條URL包括后面的參數(shù)，所以當你有個地方引用：

http://volnet.cnblogs.com/scripts/demo.js 的時候，你再次訪問

http://volnet.cnblogs.com/scripts/demo.js?v=2 的時候，該緩存仍然在你的瀏覽器里呆著，當你下次繼續(xù)訪問不帶參數(shù)的demo.js的時候，你引用的仍然還是舊的文件。

你可能對此表示不以為然，因為大部分的腳本通常都是你自己在引用，因此你更新他們的時候，總是很容易。但是有的時候，你的腳本會被第三方引用，當你變更腳本的時候，你希望他們盡量少去改動，這時候，你可能就會遇到客戶端無法刷新腳本的問題。

這時候你可能會想到Last-Modified和ETag標簽，這些標簽的出現(xiàn)，既可以替代在js文件后面加版本號或者時間戳的問題，在服務(wù)器修改他們后，通常可以被監(jiān)測到，并修改服務(wù)器的ETag值，當下次從客戶瀏覽器傳回If-None-Match和If-Modified-Since的時候就可以在服務(wù)器判斷是應(yīng)該返回304呢，還是返回200呢？看上去挺美好的事情，經(jīng)常會有各種各樣的意想不到。誰知道這些看上去很簡單的東西，并不是每個瀏覽器都具備的能力，而且可能的原因還來自各種各樣千奇百怪的客戶端設(shè)置，拋開他們的問題而言。擺在眼前的事實就是，客戶端的腳本就是因為304而不更新了，你能怎么辦？你抓回來的包，可以證明你的服務(wù)器下發(fā)了ETag，但人家就是不給你返回If-None-Match，你也不太可能在服務(wù)器去修改腳本的版本號，難道你要讓大家都按Ctrl+F5么？（可憐的事情還真不是發(fā)生在一些過時的瀏覽器上，今天找到的幾個問題，IE9/IE8全都遇上了）。

這里有個問題需要說一下，就是當你的文件已經(jīng)是304的時候，除非服務(wù)器支持ETag并且你的客戶端帶回If-None-Match標記，或者是Last-Modified和If-Modifed-Since組合的時候，原來那個鏈接，基本上都不會給你返回200，這或許是你早期的服務(wù)器設(shè)置所造成的，他不會因為你重新下發(fā)ETag，而讓他們?nèi)ソo你返回這些值，除非你這次是200，并同時下發(fā)了那些用來緩存的標記。這個結(jié)論是我推導(dǎo)出來的，可能是IE9的行為bug，或者時設(shè)計使然。

我們?nèi)绾伪苊馑麄兡?#xff1f;

• 服務(wù)端解決辦法

我想來想去，既然服務(wù)器在我手里，我可以控制，并且它確實下發(fā)了ETag，那么我何不就借服務(wù)器的能力，讓它把狀態(tài)200發(fā)下去呢？激發(fā)它下發(fā)狀態(tài)200，就是讓它回傳一個不一樣的ETag值（在客戶端叫If-None-Match），這樣服務(wù)器自然就會下發(fā)了，而那些一直緩存不更新的客戶，通常是因為沒有帶任何與之相關(guān)的參數(shù)，而宣布刷新資源失敗。這里我用了XMLHttpRequest去發(fā)一個GET請求，并把驅(qū)動狀態(tài)碼200的必要條件給帶上，就可以了。

var httpCacheUtil = {createXHR: function () {if (typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();} else if (typeof ActiveXObject != "undefined") {if (typeof arguments.callee.activeXString != "string") {var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];for (var i = 0, len = versions.length; i < len; ++i) {try {var xhr = new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];return xhr;} catch (ex) {// pass}}}return new ActiveXObject(arguments.callee.activeXString); } else {throw new Error("No XHR object available"); } },update: function(url){try {var success = function(responseText) {};var error = function(errorStatus) {};var xhr = httpCacheUtil.createXHR();if(typeof xhr != "undefined" && xhr != null) {xhr.onreadystatechange = function (event) {if (xhr.readyState == 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {if (typeof success === "function") success(xhr.responseText);} else {if (typeof error === "function")error(xhr.status);}}};xhr.open("GET", url, false);xhr.setRequestHeader("If-None-Match","\"22426f327b8cd1:0\"");xhr.setRequestHeader("If-Modified-Since", "Sat, 31 Dec 2011 02:51:00 GMT");xhr.send(null);}}catch(e){// throw no exception}}};httpCacheUtil.update("http://volnet.cnblogs.com/Scripts/demo1.js");httpCacheUtil.update("http://volnet.cnblogs.com/Scripts/demo2.js");

那些關(guān)于ETag和Last-Modifed，Cache-Control:no-cache等的說明文檔，在網(wǎng)上已經(jīng)很多了，大家可以參考相關(guān)資料來了解瀏覽器緩存的相關(guān)知識。

轉(zhuǎn)：
http://www.cnblogs.com/volnet/archive/2012/11/02/2752019.html

總結(jié)

以上是生活随笔為你收集整理的如何直接强制客户端刷新.js文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。