如何用JS/jQuery实现点击浏览器返回按钮时修改CSS的函数

要实现点击Chrome的返回按钮回到上一页时触发goBack()函数，你可以利用浏览器的popstate事件——这个事件会在浏览器历史记录栈发生变化时（包括点击返回/前进按钮、调用history.back()等）被触发。

具体实现步骤： #

1. 先定义你的目标函数：

function goBack() {
  document.body.style.overflow = 'auto';
}

2. 给window添加popstate事件监听：

window.addEventListener('popstate', function() {
  goBack();
});

注意事项： #

• 部分浏览器在页面首次加载时会自动触发一次popstate事件，如果不想初始加载就执行goBack()，可以加个标记过滤：

let isFirstLoad = true;

window.addEventListener('popstate', function() {
  if (isFirstLoad) {
    isFirstLoad = false;
    return;
  }
  goBack();
});

• 如果你在页面中通过history.pushState()或history.replaceState()手动修改过历史记录，返回时同样会触发这个事件，能覆盖这类场景。

这个方案基于HTML5标准API，在Chrome等现代浏览器中都能正常工作。

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