2010-04-23 90 views
4

是否可以使用JavaScript來控制瀏覽器是否轉到服務器以獲取圖像或瀏覽器緩存?我可以強制瀏覽器進行服務器調用,否則會使用緩存的圖像?我知道我可以簡單地將一個查詢字符串附加到我的圖片網址,但是,如果我理解正確,那是可行的,因爲瀏覽器將它視爲新圖片。我希望舊圖像在緩存中被替換。是否有防止圖像被緩存的客戶端方法?

回答

0

你不能用標準的img標籤做這樣的事情。您可以爲圖像創建一個XMLHttpRequest並設置if-modified-since標題。這應該在緩存中替換舊的圖像:

var url = "http://www.mysite.com/images/myimage.png"; 
var xhr = new XMLHttpRequest(); // or x-browser compat function 
xhr.open("GET", url, true); 
xhr.setRequestHeader("If-modified-since", "Thu Jan 1 00:00:00 UTC 1970"); 
xhr.onreadystatechange = function() 
{ 
    if (xhr.readyState == 4 && xhr.status == 200) 
     document.getElementById("myImg").src = url; 
} 
xhr.send(); 
+0

感謝Andy E的頭。簡單地做這件事:document.getElementById(「myImg」)。src = url – morgancodes 2010-04-23 23:59:57

+0

@morgancodes:當您將圖像src'設置爲url時,它將使用瀏覽器的默認緩存方法並檢索當前緩存的圖像。在提出請求時,沒有辦法設置請求標頭或任何其他HTTP相關選項。我的答案中的方法強制瀏覽器下載圖像的新副本並將其保存在緩存中,然後將圖像元素切換到新緩存的版本。 – 2010-04-24 09:16:32

+0

很酷。謝謝。現在就試試看。 – morgancodes 2010-04-27 16:50:24

1

你可以在頁面的緩存控制,設置爲「無緩存」像這樣在使用元標籤:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> 

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> 

您還可以設置頁面「過期」在過去,這一點在理論上會導致瀏覽器檢查最新版本:

<META HTTP-EQUIV="EXPIRES" value="some date in the past" /> 

請注意,「過去的某個日期」必須是GMT RFC 1123 formatSee Here

希望這有助於:

注意,你可以只在HTTP頭本身發送這些。

+0

另外,我將開始一個名爲NO CACHE的編程主題ska核心樂隊... – MisterMister 2010-04-24 07:48:02