JavaScript：浏览器重定向场景下unload事件触发问题咨询

核心触发限制原因 #

现代浏览器的以下特性会导致unload事件无法正常触发：

• Blink内核浏览器（Chrome、Edge等）从88版本开始默认启用往返缓存（Back/Forward Cache，简称bfcache），导航离开当前页面时会将完整页面状态暂存到内存中，不会执行页面销毁逻辑，因此不会触发unload事件
• 如果你的跳转逻辑是打开新标签页（比如target="_blank"的a标签跳转），原页面没有被卸载，自然不会触发unload
• beforeunload事件触发后，浏览器会掐断绝大多数异步任务，如果你的unload监听逻辑包含异步操作（比如fetch、setTimeout），会出现逻辑未执行、误以为事件未触发的情况

触发unload事件的可行方案 #

基础场景排查 #

1. 确认跳转逻辑是在当前标签页替换原有页面，不是新开标签页
2. 调整unload监听逻辑，所有操作必须是同步逻辑，数据上报类操作必须使用navigator.sendBeacon()API，该API是浏览器唯一保证会在页面卸载流程中执行完成的上报方案

解决bfcache导致的不触发问题 #

如果是bfcache特性阻止了unload触发，有两种处理方案：

• 禁止当前页面进入bfcache：给页面的响应头添加Cache-Control: no-store，页面不会进入bfcache，导航离开时就会正常触发unload事件
• 优先使用pagehide事件替代unload：W3C目前已经不推荐使用unload事件，pagehide事件是bfcache规范明确要求的页面离开事件，无论页面是否进入bfcache都会触发，兼容性覆盖所有主流现代浏览器，可靠性远高于unload

参考代码示例 #

// unload事件正确监听写法
window.addEventListener('unload', () => {
  // 仅允许同步逻辑或sendBeacon上报
  navigator.sendBeacon('/log', JSON.stringify({ action: 'unload' }))
})

// 更推荐的pagehide替代方案
window.addEventListener('pagehide', (e) => {
  // e.persisted为true代表页面进入bfcache，未被销毁
  const logData = JSON.stringify({
    action: 'page_leave',
    in_bfcache: e.persisted
  })
  navigator.sendBeacon('/log', logData)
})

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