🍛 学习 - 游览器 bfcache 机制

SLYLXDYMJ

字数：285 字

时长：1 分钟

游览器为了提高用户体验，提供了 bfcache 机制，但是有时会引起 bug，
这时我们可以手动的伪禁用 bfcache 机制。

bfcache 是啥

是一个游览器机制
比如说从 A 网页去 B 网页，然后再点击 B 网页的回退按钮回到 A 网页
页面不会刷新，而是使用缓存
用户之前输入的表单内容都会存在，并且滚动条的位置也存在。

例子如下：
在 A 网页向下滚动了，并且填入了表单内容后跳转 B 页面
从 B 页面通过返回按钮返回到了 A 页面
结果滚动位置以及表单内容都存在

例子

伪禁用

可以判断当前页面是否有 bfcache 缓存
若有，则刷新当前页面，即可实现伪禁用

// 将此代码放到 head 标签靠上的位置
// 否则会加载额外的资源
// 此代码相当于使用 bfcache 机制的回调
// 使用 location.reload 重置页面
window.addEventListener('pageshow', function (e) {
  if (
    e.persisted || 
    (window.performance && window.performance.navigation.type == 2)
  ) {
    location.reload();
  }
}, false);