history.back() 返回页面不刷新

[jun-lu]

history.back() 返回页面不刷新

众所周知 history.back() 可以让浏览器返回上一个页面，确切的说浏览器是返回了上一个状态 。所有静态资源都会from cache， 不会从服务器重新请求，通过jsonp发出的接口也会被缓存，这会导致我们的页面不能及时更新。

• jsonp 请求被缓存、

network请求是点击back以后的效果，从size中可以看出所有静态资源全部被cache， 包括红色部分的jsonp请求，
from cache 说明浏览器使用了上一次缓存的资源，故页面如果依赖jsonp请求结果展示的信息不会被更新。

• 例如

在用户列表，点击一个就诊人名字，前往修改页面改变姓名，再使用 history.back() 返回上一个界面，那么你看到的姓名不会被改变。

如何解决

分析完问题的根源，其实这并不是浏览器的bug，反而是浏览器提升体验的优化。我们只要达到返回上一页不让jsonp不缓存即可。

最佳实践

在jsonp请求上加随机数 getList?r=Math.random()

一些不那么优雅的解决方案

• 使用 document.referrer

 //显然可以解决问题，但是浏览器的历史记录将会有两次列表页面的记录，返回按钮需要点击两次才能返回到上上一个页面（在移动端体验很差）
location.replace(document.referrer)

• 使用 reload ?

// 事实证明，这个完全行不通，但是网络上还大量贴了这样的代码，可能某些浏览器有效
history.back();
location.reload();

更近一步

浏览器什么时候 200 => from cache

操作类型	Google Chrome
在当前页面的浏览器地址栏回车	会
history.back()	会
history.go(-1)	会
history.forward()	会
第二次加载已过设置过 ETag,Cache-Control，Expires 头的资源	会
浏览器的刷新按钮	不会
F5	不会
contorl+r	不会
location.reload()	不会

哪些资源会被 from cache

理论上明确设置了 ETag,Cache-Control，Expires 头的资源才会被from cache。 但是我们的jsonp请求肯定没有设置缓存头还是被缓存了，说明我们在操作浏览器history的时候，浏览器会扩大我们的缓存范围。几乎对上一个页面的所有资源做了缓存。

[bhaltair]

赞👍

[Yuanfang-fe]

赞

[jiangxinge]

不知道什么时候就栽到某一个基本知识点上，解惑了

[Luffyying]

赞

[MrQinYQ]

牛的