关于beforeunload事件的使用咨询：如何在页面卸载前提示用户未保存的变更列表

我来帮你梳理下这个场景的解决方案哈！首先得明确一个关键点：现代浏览器出于安全和体验的考虑，对onbeforeunload事件的自定义内容做了限制——你没法直接在它的提示框里展示完整的未保存变更列表，大部分浏览器只会显示自己默认的提示文案，最多附带你返回的简短文本片段。不过咱们可以换个思路来实现需求，具体分两种情况说：

一、利用onbeforeunload做基础兜底提示（兼容所有卸载场景） #

虽然不能展示完整列表，但你可以把未保存变更的核心信息（比如数量、关键记录名称）塞进返回的文本里，让用户有个基本感知。举个代码例子：

首先咱们先维护一个数组来存未保存的记录：

// 用来存储保存失败的未变更记录
const unsavedChanges = [];

// 假设这是你的保存失败回调，把失败的记录添加到数组里
function handleSaveFailed(record) {
  unsavedChanges.push(record);
}

然后监听beforeunload事件：

window.addEventListener('beforeunload', (e) => {
  if (unsavedChanges.length > 0) {
    // 构造提示文本，把未保存记录的关键信息拼进去
    const tipText = `你有${unsavedChanges.length}条未保存的变更：\n${unsavedChanges.map(item => item.title).join('\n')}`;
    // 兼容不同浏览器的处理逻辑
    e.preventDefault();
    e.returnValue = tipText;
    return tipText;
  }
});

不过要注意哦，像Chrome、Firefox这类主流浏览器，可能只会显示“此页面正在尝试阻止您离开...”这类默认提示，你的自定义文本可能只会显示一小部分，甚至完全不显示，所以这个方法只能做兜底。

二、主动拦截用户操作，展示完整的自定义提示（体验更好） #

既然onbeforeunload的提示受限，咱们可以提前拦截用户的离开动作，比如点击页面内的链接、刷新按钮、切换标签页这些场景，用原生的confirm弹窗或者自定义模态框来展示完整的未保存列表。

举几个常用场景的代码：

1. 拦截页面内的链接跳转

document.addEventListener('click', (e) => {
  // 检测点击的是页面内的链接
  if (e.target.tagName === 'A' && unsavedChanges.length > 0) {
    e.preventDefault();
    // 构造包含完整列表的确认文本
    const confirmContent = `你有${unsavedChanges.length}条未保存的变更：\n${unsavedChanges.map(item => `- ${item.title}`).join('\n')}\n确定要离开吗？`;
    if (confirm(confirmContent)) {
      // 用户确认后再跳转链接
      window.location.href = e.target.href;
    }
  }
});

2. 配合页面可见性变化做提示
   当用户切换标签页或者最小化窗口时，也可以触发提示：

document.addEventListener('visibilitychange', () => {
  if (document.hidden && unsavedChanges.length > 0) {
    // 这里可以调用自定义模态框，或者触发beforeunload的兜底提示
    const warning = `你还有${unsavedChanges.length}条记录没保存成功哦，记得处理后再离开~`;
    // 手动触发beforeunload事件
    window.dispatchEvent(new Event('beforeunload'));
  }
});

总结一下 #

如果想让用户清楚看到完整的未保存变更列表，优先用主动拦截的方式，比如拦截链接点击、表单提交等场景，用自定义弹窗展示；onbeforeunload作为兜底，处理用户直接关闭标签、刷新页面这类无法提前拦截的场景，虽然不能展示完整列表，但能提醒用户有未保存内容。

备注：内容来源于stack exchange，提问作者Leanne