JavaScript如何简单捕获页面重载 区分页面关闭与重载场景

你现有实现的核心逻辑是：提前标记所有用户主动触发的页面跳转行为，未被标记的unload触发场景即判定为浏览器关闭。漏判重载场景的本质原因，是没有把重载相关的主动操作纳入标记范围，用和现有点击捕获同复杂度的逻辑补全标记即可，不需要引入服务端心跳、长连接等重量方案。

具体实现 #

原有链接点击、表单提交的标记逻辑完全保留，只需要补两类重载场景的标记即可：

• 监听键盘事件，捕获F5、Ctrl/Cmd+R、Ctrl/Cmd+Shift+R这类快捷键触发的重载
• 在beforeunload阶段读取浏览器导航类型，识别浏览器界面按钮触发的重载、前进/后退导航操作

完整代码如下：

var closing = true;
$(function () {
  // 原有逻辑：捕获链接跳转、表单提交操作
  $("a,button[type=submit]").click(function() {
    closing = false;
  });

  // 新增：捕获快捷键触发的页面重载
  $(window).on('keydown', function(e) {
    const key = e.key.toLowerCase();
    if (
      e.key === 'F5' || 
      ((e.ctrlKey || e.metaKey) && key === 'r')
    ) {
      closing = false;
    }
  });

  // 新增：捕获浏览器UI按钮触发的重载、前进/后退导航
  $(window).on('beforeunload', function() {
    // 兼容新旧版本浏览器导航类型API
    const navEntry = performance.getEntriesByType('navigation')[0];
    const navType = navEntry?.type ?? performance.navigation?.type;
    // 导航类型1为页面重载，2为前进/后退，均不属于浏览器关闭场景
    if (navType === 1 || navType === 2) {
      closing = false;
    }
  });

  $(window).on("unload", function(){
    if (closing) {
      // 此处放置浏览器真正关闭时需要执行的业务逻辑
    }
  });
});

边界说明 #

所有前端侧的关闭识别方案都存在通用限制，提前知晓避免踩坑：

• 极端场景（用户通过任务管理器强杀浏览器进程、系统掉电、浏览器崩溃）无法被前端捕获，这是浏览器底层安全机制决定的，没有前端层面的解法
• 如果页面存在JS主动触发跳转的逻辑（比如调用location.href跳转、location.replace跳转），只需要在跳转逻辑执行前手动加一句closing = false即可，和原有标记逻辑完全一致
• unload回调里不要放置耗时过长的同步逻辑，现代浏览器会强制截断unload阶段的长任务，避免页面阻塞用户关闭操作，要保证关闭时执行的逻辑足够轻量

内容的提问来源于stack exchange，提问作者Łukasz Włodarczyk