使用iFrame动态加载Application Cache

为了避免缓存主页面，一般使用动态iFrame的方式来加载Application Cache，方法如下：

updateImageCache: function () {

            if (null == $("iframe")) {
                
            } else {
                $("iframe").remove();
            }

            var iframe = document.createElement('iframe');
            iframe.setAttribute('width', 0);
            iframe.setAttribute('height', 0);
            iframe.setAttribute('style', "left:0px; top:0px;border:0px; position:absolute;");
            
            document.body.appendChild(iframe);
            iframe.src = 'ImageCache?manifestId=' + this._manifestId;
        }

上面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));
Response.Cache.SetNoServerCaching();//关闭服务器输出缓存

这样就可以正常从Cache中加载数据了