IE 重载 iframe

   

迁移 http://aikin.me/2014/06/16/ie-iframe-cache/    

 

最近“致力于”调 IE9  、IE10 、 firefox 、 chrome 浏览器对 iframe刷新。 发现在IE浏览器中，有些刷新 iframe 的方法会加载缓存。以下就对一些方法在 IE9 、IE10(以下简称IE)的产生效果介绍一下：

 

    1、对 iframe 的 src 属性重新赋值来实现刷新

$("#iframeId").attr("src", $("#iframeId").attr("src"));

     在 IE 中，使用这个方法后 iframe 没有刷新的效果。iframe反应很平静。

 

    2、location.replace(URL) 方法

 $("#iframeId")[0].contentWindow.location.replace(url);
 或
 document.getElementById("iframeId").contentWindow.location.replace(url);

 注: contentWindow.location.replace === contentWindow.document.location.replace 
       返回值为 true， 也就是两个方法是相同的。

    在W3School对这个方法是这么描述的：(1). replace() 方法可用一个新文档取代当前文档;

                                                                  (2). replace() 方法不会在 History 对象中生成一个新的记录。当使

                                                                        用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

    也就是说该方法通过指定URL替换当前缓存在历史的记录，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL。

    但是在 IE 中使用这个方法和描述的效果。将会用新的 url 内容替换掉当前的历史记录。

    

    3、location.reload(force)方法

 $("#iframeId")[0].contentWindow.location.relaod(true); 
 或
 document.getElementById("iframeId").contentWindow.location.reload(true);

 注: contentWindow.location.reload === contentWindow.document.location.reload 
       返回值为 true， 也就是两个方法是相同的。

   

    该方法用于重新加载当前页面。可选参数：force 是Boolean类型的。

    在W3School上对该方法的描述：  (1). 如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头

                                                               If-Modified-Since 来检测服务器上的文档是否已改变。

                                                         (2). 如果文档已改变，reload() 会再次下载该文档。

                                                         (3). 如果文档未改变，则该方法将从缓存中装载文档。这与用户单击

                                                               浏览器的刷新按钮的效果是完全一样的。

                                                         (4). 如果把该方法的参数设置为 true，那么无论文档的最后修改日期

                                                               是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户

                                                               在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 

 

    可见这方法才是重载 iframe 的正确方法。在 IE中使用该方法，会重新从服务器获取新的页面，不会加载

缓存。

 

   4、替换缓存

    虽然这个方法可以实现重新从服务器上，获取新的页面，但是它只能获取当前窗口的。当一个 iframe中有两个或两个以上的可以相互跳转的页面，你同时要重新去加载这些页面。这时 reload 方法，就不是很适用了(因为 reload 方法没法同时从服务器上获取多个页面)。

    所以在 IE 中，可以使用 ajax 去GET 这些页面，来替换更新本地的缓存，在刷新 iframe。下面的方法就是用 ajax 去替换本地的缓存的方法。

$.ajax({
    type: "GET",
    url: url,
    dataType: "text",
    beforeSend: function (xmlHttp) {
        xmlHttp.setRequestHeader("If-Modified-Since", "0");
        xmlHttp.setRequestHeader("Cache-Control", "no-cache");
    }
}).done(function () {
    console.log('replace cache ok');
})

 

    If-Modified-Since控制缓存页面时间，在发送HTTP请求时，把浏览器端缓存页面的最后修改时间一起发到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。

   Cache-Control 控制是否要进行缓存页面。