在页面关闭前弹出确认提示框的方法

在JavaScript中，你可以使用beforeunload事件来在用户尝试关闭页面或导航离开时显示确认提示框。以下是几种实现方式：

基本实现方法

window.addEventListener('beforeunload', function(e) {
    e.preventDefault();
    e.returnValue = ''; // 这是为了兼容较旧的浏览器
    return ''; // 现代浏览器需要返回一个字符串
});

兼容性更好的写法

window.addEventListener('beforeunload', function(e) {
    // 现代浏览器
    if (e) {
        e.preventDefault();
        e.returnValue = '您确定要离开吗？未保存的更改可能会丢失。';
    }

    // 旧版浏览器
    return '您确定要离开吗？未保存的更改可能会丢失。';
});

带条件的确认提示

let shouldConfirm = true; // 可以根据条件设置这个变量

window.addEventListener('beforeunload', function(e) {
    if (!shouldConfirm) return;

    const confirmationMessage = '您有未保存的更改，确定要离开吗？';

    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
});

注意事项

1. 浏览器限制：现代浏览器会忽略你自定义的消息文本，而是显示它们自己的标准消息，以防止恶意网站显示误导性信息。

2. 用户体验：不要滥用这个功能，只在确实需要防止数据丢失的情况下使用。

3. SPA应用：对于单页应用(SPA)，你可能还需要监听路由变化事件。

4. 移除事件监听器：当不再需要时，记得移除事件监听器：

function handleBeforeUnload(e) {
    e.preventDefault();
    e.returnValue = '';
}

// 添加监听器
window.addEventListener('beforeunload', handleBeforeUnload);

// 移除监听器
window.removeEventListener('beforeunload', handleBeforeUnload);

替代方案

如果你需要更复杂的关闭确认逻辑，可以考虑使用模态框库(如SweetAlert)来实现更美观的提示：

window.addEventListener('beforeunload', function(e) {
    if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = '';

        // 这里可以调用自定义模态框
        // 例如: showCustomConfirmDialog();
        return '';
    }
});

希望这些方法能帮助你实现页面关闭前的确认提示功能！