IE reload iframe

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

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

1	$("#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对这个方法是这么描述的：

replace() 方法可用一个新文档取代当前文档;

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上对该方法的描述：

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。

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

如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

效果：在 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 控制是否要进行缓存页面。