blog
blog copied to clipboard
Published
20 hours ago •
jun-lu
jun-lu
history.back() 返回页面不刷新
trafficstars
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的时候，浏览器会扩大我们的缓存范围。几乎对上一个页面的所有资源做了缓存。
