如何在点击浏览器返回按钮回到上一页时移除jQuery添加的类？

核心依赖浏览器原生的popstate事件，该事件会在用户点击浏览器前进/后退按钮、调用history.back()/history.forward()等历史导航操作时触发，监听该事件执行移除类逻辑即可。

基础实现代码 #

window.addEventListener('popstate', function() {
  // 替换为实际目标元素选择器和要移除的类名
  $('.target-element').removeClass('custom-added-class');
});

兼容往返缓存（bfcache）的优化方案 #

部分浏览器会将页面存入往返缓存，点击返回时直接从缓存读取页面，可能出现popstate事件不触发的情况，可额外监听pageshow事件做兼容：

// 监听历史导航操作
window.addEventListener('popstate', removeTargetClass)
// 监听页面从缓存恢复的场景
window.addEventListener('pageshow', function(e) {
  // e.persisted为true时说明页面从往返缓存加载
  if (e.persisted) removeTargetClass()
})

// 封装移除类的公共方法
function removeTargetClass() {
  $('.target-element').removeClass('custom-added-class');
}

注意事项 #

• 请根据实际业务替换代码中的元素选择器和类名
• 如果仅在特定场景下需要移除类，可在removeTargetClass方法中增加状态判断逻辑，避免误操作
• 单页应用项目可将该逻辑和路由守卫结合，减少全局监听的冗余执行

内容的提问来源于stack exchange，提问作者wcodavid