使用iFrame動態載入Application Cache

標籤：

為了避免緩衝首頁面，一般使用動態iFrame的方式來載入Application Cache，方法如下：

 1 updateImageCache: function () { 2  3             if (null == $("iframe")) { 4                  5             } else { 6                 $("iframe").remove(); 7             } 8  9             var iframe = document.createElement(‘iframe‘);10             iframe.setAttribute(‘width‘, 0);11             iframe.setAttribute(‘height‘, 0);12             iframe.setAttribute(‘style‘, "left:0px; top:0px;border:0px; position:absolute;");13             14             document.body.appendChild(iframe);15             iframe.src = ‘ImageCache?manifestId=‘ + this._manifestId;16         }

上面iframe載入的頁面是ImageCache，而由於每個使用者所需要載入的緩衝內容又不相同，所以我這邊用manifestId來區分，這是一個唯一值。這樣之後Cache是正常載入下來了，可是當我去訪問已經緩衝的資源的時候，卻發現還是從伺服器請求，而沒有直接從緩衝載入。如所示：

 

試了很多方法，搞了好久還是不行，google查了很多資料無果，還在網上發現其他人也遇到過此問題，但是我是見到過這樣做成功的例子的，所以還是不死心，比對了http請求的內容，最後終於發現了導致這個原因的罪魁禍首，原來我緩衝的資源，在請求的時候Response 中的Cache-Control是private的，如：

 

而如果要從cache直接讀取的話，需要把Cache-Control的值修改成public，並且設定max-age的值

Response.CacheControl = "public";Response.Cache.SetMaxAge(new TimeSpan(1, 0, 0));

這樣就可以正常從Cache中載入資料了

使用iFrame動態載入Application Cache