在页面关闭的时候等待用户再次确认

一、通过 beforeunload 事件实现关闭确认

1. 原理

• beforeunload 是一个浏览器事件，在用户尝试关闭页面或刷新时触发。
• 可以通过设置 event.returnValue 或返回字符串触发浏览器的确认对话框。

---

2. 基本实现代码

window.addEventListener('beforeunload', function (event) {
    // 设置提示信息
    const message = '您有未保存的更改，确定要离开吗？';
    event.returnValue = message; // 现代浏览器需要这个字段才能显示提示框
    return message; // 部分浏览器需要返回值
});

3. 行为限制

• 现代浏览器限制：浏览器通常会忽略自定义消息，只显示默认的提示内容。
• 触发条件限制：必须是用户主动触发关闭或刷新行为，程序性关闭（如 window.close()）不会触发此事件。

---

二、最佳实践

为了提升用户体验和兼容性，可以结合业务逻辑按需触发关闭确认：

1. 根据状态触发

• 检查是否有需要提示的未保存数据。

示例代码：

let hasUnsavedChanges = false;

// 模拟有未保存的数据
document.querySelector('input').addEventListener('input', () => {
    hasUnsavedChanges = true;
});

window.addEventListener('beforeunload', function (event) {
    if (hasUnsavedChanges) {
        const message = '您有未保存的更改，确定要离开吗？';
        event.returnValue = message;
        return message;
    }
});

---

2. 可控的启用/禁用

• 提供启用和禁用关闭确认的机制。

示例代码：

let shouldWarnOnClose = false;

function enableCloseWarning() {
    shouldWarnOnClose = true;
}

function disableCloseWarning() {
    shouldWarnOnClose = false;
}

window.addEventListener('beforeunload', function (event) {
    if (shouldWarnOnClose) {
        const message = '您有未保存的更改，确定要离开吗？';
        event.returnValue = message;
        return message;
    }
});

---

三、适配多种场景

1. 单页应用（SPA）路由导航

• 在单页应用中，可以监听路由变化事件，结合 beforeunload 提示。

示例（以 Vue Router 为例）：

router.beforeEach((to, from, next) => {
    if (hasUnsavedChanges) {
        const answer = confirm('您有未保存的更改，确定要离开吗？');
        if (answer) {
            next();
        } else {
            next(false); // 阻止路由跳转
        }
    } else {
        next();
    }
});

---

2. 表单未提交

• 检测页面上表单的修改状态，提示用户保存数据。

示例代码：

document.querySelector('form').addEventListener('change', () => {
    hasUnsavedChanges = true;
});

window.addEventListener('beforeunload', function (event) {
    if (hasUnsavedChanges) {
        const message = '表单未保存，确定要离开吗？';
        event.returnValue = message;
        return message;
    }
});

---

3. 文件上传中

• 阻止用户在文件上传未完成时关闭页面。

示例代码：

let isUploading = false;

function startUpload() {
    isUploading = true;
}

function finishUpload() {
    isUploading = false;
}

window.addEventListener('beforeunload', function (event) {
    if (isUploading) {
        const message = '文件上传中，确定要离开吗？';
        event.returnValue = message;
        return message;
    }
});

---

四、注意事项

1. 浏览器支持情况：

   • 现代浏览器（Chrome、Firefox、Edge 等）支持 beforeunload 事件，但对自定义提示内容的支持有限。
   • 移动浏览器可能忽略 beforeunload 事件。

2. 用户体验：

   • 频繁弹出确认框会降低用户体验，建议仅在必要时启用。

3. 安全限制：

   • 浏览器限制脚本干预关闭行为，无法通过 JavaScript 强制阻止用户关闭页面。

4. 自定义消息限制：

   • 大部分浏览器不支持自定义提示消息，只显示默认的提示内容。

---

五、推荐解决方案

1. 按需触发关闭提示

• 检查页面状态（如未保存数据、文件上传中）。
• 使用逻辑判断是否启用 beforeunload。

2. 结合路由和 SPA 框架

• 对单页应用的路由跳转增加确认提示。

3. 适配不同浏览器

• 通过检测 beforeunload 支持性优化代码逻辑。

---

六、参考文档

1. MDN - Window: beforeunload event
2. StackOverflow - How to use beforeunload in modern browsers

​