各种刷新页面的方法

很多时候,我们因为一些原因,要对页面进行刷新,这个时候,可以使用的方法有很多



location.reload();

location.href = location.href;

window.location = location;

location.replace( location.href );

location.go(0);


关于浏览器缓存和服务器获取

用户浏览网页的时候,在当前标签页内进行各种页面跳转的时候,浏览器会缓存浏览过的页面。

在进行页面跳转的时候,有两种方式:

一种是在历史记录内进行跳转,这种跳转会由浏览器读取缓存的页面数据进行展示。

还有一种是跳出历史的跳转,直接指向路径的url,这种跳转是会从服务器获取数据展示的。

如何查看是否读取的缓存

以chrome的开发者工具为例,打开之后,查看network面板,清空当前的网络请求列表。

在console里面执行相应的方法,然后查看当前页面的请求(也就是xxx.html),

如果size/content列下显示的是from cache就表明是读的缓存(进行这个实验的时候应该关闭开发者工具里面的禁止缓存选项)

各种跳转的详细情况

location.reload

这个方法有个Boolean值的参数,为true的时候,则刷新就始终是从服务器获取最新的数据。

如果不设定或者设定为false的时候,则是从浏览器的缓存里面获取数据

chrome里面reload的默认参数似乎是true,也就是说会从服务器端获取

所以使用reload的时候,最好明确添加reload的参数

参考地址:https://developer.mozilla.org/en-US/docs/Web/API/Location.reload

location.href = location.href

把location.href指向当前页地址就会触发重新刷新页面。

不过这种方法不太稳定,在chrome和firefox下面,第一次执行的时候会从服务器端载入当前页面,之后再次执行的时候就从浏览器缓存读取,所以最好不要轻易使用

window.location = window.location

window.location的赋值会导致页面的重载把window.location赋值给window.location,使得重载的页面再次指向当前页面,也就变相的实现了刷新页面。

这种方式就目前测试读取的是浏览器缓存里面的内容

location.replace

location.replace会用指定的url里面的内容替换当前页的内容,这个会导致用户无法后退回到之前的页面,回到的是之前页面的前一个历史。

chrome下会始终从缓存中读取。

firefox下,第一次从服务器获取,之后从缓存中读取。

参考地址:https://developer.mozilla.org/en-US/docs/Web/API/Location.replace

history.go(0)

history.go是会跳转向对应的历史,所以很明显是一定会从缓存中读取的。

使用参数0,表示的是跳转的历史就是当前页,也就实现了刷新页面。

参考地址:http://www.w3schools.com/jsref/met_his_go.asp

总结

综上,在刷新页面的时候,如果需要考虑从服务器获取还是读取缓存,比较靠谱的是location.reload()和history.go(0)

参考地址:

http://hi.baidu.com/winterhome/item/73c26920b3faa10a76272c97

http://stackoverflow.com/questions/1536900/force-a-page-refresh-using-javascript-in-firefox

发表评论