不加载执行js_浏览器通过导航栏按钮后退前进时页面js不执行(浏览器的back-forward cache)...

bb247f33f398088991d08c835a4c55cf.png

问题描述:若存在一个页面包含超链接,点击跳转之后,此时点击浏览器的后退按钮的话,页面是不会重新渲染的(js什么的是不会再执行的,页面也不会重新挂载,通过观察 window.addEventListener('load',handler) 这里的handler不执行可以得出),这是因为浏览器的“往返缓存(back-forward cache - bfcache)”特性。

问题根源:back-forward cache 保存了DOM 和 JavaScript的状态,实际上是将整个页面保存在了内存里 - JS高程(红宝书)3 第 13 章 13.4事件类型 - 393 (chrome已取消bfcache,但是ios的微信浏览器内核是webkit的,依然存在bfcache)

问题场景:若在跳转后的页面里修改了当前页面的某个状态,而最新的页面是没有返回主页面按钮的(移动端,微信开发,通过底部导航回退按钮作为返回键),那么通过底部回退按钮回到一开始页面的时候,即使已经修改了状态了,但是由于js不执行,那么它在页面上展示的依然是过期的信息。

真实场景:个人主页存在一个未读信息,点击了这个未读信息进入查看未读信息的页面,然后再点击具体某个信息,此时未读信息应该减1,而实际回退到页面时未读信息数量依然不变。

解决方法:浏览器在加载页面时,无论加载的页面是否来自bfcache,都会触发pageshow事件,所以在window上监听即可。

具体实现:点击了具体某个信息之后,往sessionStorage里添加上一个标志位来说明未读信息发生改变(点击了未读信息的条数),然后比对badge与已点击的信息,判断是否仍有未读信息来决定是否需要继续展示badge。

所以要在个人主页里监听pageshow事件来处理未读badge。

扩展:相应的也有一个pagehide事件。但不知此事件与beforeunload有何区别。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值