Vue 进阶（幺肆肆）：(window,parent,opener,top).location.reload 方法分析

一、前言

项目开发过程中，通过iframe引入其他页面，返回至前一页面时调用parent.location.reload(true)时 Chrome、IE10(11)下均可以正常返回，但是在 IE9 下却无效。

改成top.location.reload(true)就可以了。

• window.location.reload(true)刷新当前页面.

• parent.location.reload(true)刷新父亲对象（用于框架）

• opener.location.reload(true)刷新父窗口对象（用于单开窗口）

• top.location.reload(true)刷新最顶端对象（用于多开窗口）

二、语法介绍

• reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet])参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。 true, 则以GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")。

• replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。语法：location.replace(URL) 参数： URL
  

三、应用场景分析

在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点 F5 刷新页面，所以页面的method="post"的时候，会出现“网页过期”的提示。那是因为Session的安全保护机制。

当调用 location.reload() 方法的时候， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。如果有这种应用： 我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建， 我们期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写： location.replace(location.href)

四、后续

使用location.reload(true)方法，在刷新页面过程中，均会导致页面刷新过程中出现空白现象的发生，用户体验不佳，故继续探究解决方法。

五、拓展阅读

• 《Vue进阶（壹佰）：vue刷新当前页面，重载页面数据》