浏览器后退事件踩坑

这是一次关于浏览器后退事件的踩坑记录。

背景

页面需要在打开一个 Drawer 的情况下，用户点击浏览器的后退按钮之后，将 Drawer 关闭，而不是页面发生了后退。

解决方案

思路

并不是要阻止浏览器触发后退事件，而是在浏览器触发后退事件前，将预定的 history 信息加入到浏览器的路由信息中，后退时，是后退到了指定的页面，然后在后退事件中加入自己的处理。

一点点代码

利用 history.pushState() 方法在浏览器的历史堆栈中添加一个 state。
然后再监听 popstate 事件，加入自己的处理。

const handleOnpopState = () => {
  // your code
  Drawer.close()
}

window.history.pushState(null, '', document.URL);

// mounted
window.addEventListener('popstate', handleOnpopState, false)

// unmount
window.removeEventListener('popstate', handleOnpopState, false)

注意点

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.