如何控制浏览器重载事件：考试页面弹窗与自动提交问题

需求背景 #

开发培训管理系统的考试页面，需实现：

• 学生开始考试后，尝试重载页面时先触发SweetAlert确认弹窗
• 用户确认后自动提交考试表单；若强制重载，也自动提交表单
  已禁用右键菜单和键盘重载，但无法阻止浏览器重载按钮或直接访问URL导致的页面重载。

现有问题 #

使用beforeunload事件时遇到两个核心问题：

1. Ajax请求在浏览器默认弹窗显示前就已执行
2. SweetAlert需点击浏览器的「离开页面」或「取消」按钮后才弹出
   期望实现先显示自定义SweetAlert弹窗，用户确认后再执行Ajax提交。

现有代码 #

HTML代码 #

<input type="text" name="username" id="name" placeholder="Username">

JS代码 #

const beforeUnloadHandler = (event) => {
    // Recommended
    event.preventDefault();
    // Included for legacy support, e.g. Chrome/Edge < 119
    event.returnValue = true;

    Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, delete it!"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "controller.php",
                method: "GET",
                success: function (response) {
                    console.log(response);    
                }
            })
        }
    });
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
    if (event.target.value !== "") {
        window.addEventListener("beforeunload", beforeUnloadHandler);
    } else {
        window.removeEventListener("beforeunload", beforeUnloadHandler);
    }
});

问题根源 #

beforeunload事件的浏览器特性决定：它会优先触发自带的确认弹窗，拦截异步操作（如SweetAlert），导致自定义弹窗滞后，且Ajax请求因异步特性提前执行。

解决方案 #

通过状态变量控制+多事件监听组合，绕开beforeunload的限制：

1. 初始化状态变量 #

let isUnloading = false;
let hasConfirmed = false;

2. 重写beforeunload处理函数 #

仅在未确认时触发浏览器默认弹窗，避免干扰自定义流程：

const beforeUnloadHandler = (event) => {
    if (!hasConfirmed) {
        event.preventDefault();
        event.returnValue = ""; // 现代浏览器要求空字符串
        return "";
    }
};

3. 监听卸载触发行为，优先显示SweetAlert #

拦截浏览器导航、重载按钮等操作，先弹出自定义弹窗：

// 监听浏览器前进/后退、重载按钮
window.addEventListener('popstate', (event) => {
    handleUnloadAttempt();
    // 恢复历史状态，阻止页面跳转
    history.pushState(null, null, window.location.href);
});

// 处理卸载尝试的核心逻辑
function handleUnloadAttempt() {
    if (isUnloading || hasConfirmed) return;
    
    isUnloading = true;
    Swal.fire({
        title: "确认离开？",
        text: "离开后考试将自动提交，无法继续作答！",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "确认提交并离开",
        cancelButtonText: "继续作答"
    }).then((result) => {
        isUnloading = false;
        if (result.isConfirmed) {
            hasConfirmed = true;
            // 执行表单提交
            submitExamForm();
            // 允许页面卸载
            window.location.reload();
        } else {
            hasConfirmed = false;
            history.pushState(null, null, window.location.href);
        }
    });
}

// 封装表单提交逻辑
function submitExamForm() {
    $.ajax({
        url: "controller.php",
        method: "POST", // 考试提交建议用POST
        data: {
            username: $("#name").val()
            // 可扩展添加其他考试数据字段
        },
        success: function (response) {
            console.log("考试已提交:", response);
        },
        error: function () {
            console.error("提交失败");
        }
    });
}

4. 优化输入框事件监听 #

动态绑定/解绑事件，重置状态：

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
    if (event.target.value !== "") {
        window.addEventListener("beforeunload", beforeUnloadHandler);
        window.addEventListener('popstate', handleUnloadAttempt);
    } else {
        window.removeEventListener("beforeunload", beforeUnloadHandler);
        window.removeEventListener('popstate', handleUnloadAttempt);
        hasConfirmed = false;
        isUnloading = false;
    }
});

5. 兜底处理：直接访问URL/关闭标签页 #

针对无法拦截的场景，在页面卸载前执行提交：

window.addEventListener('unload', () => {
    if (!hasConfirmed) {
        // 用同步请求确保提交完成（现代浏览器可能限制，需结合后端兜底）
        $.ajax({
            url: "controller.php",
            method: "POST",
            async: false,
            data: {
                username: $("#name").val()
            }
        });
    }
});

注意事项 #

• 同步Ajax在现代浏览器中可能被限制，建议结合后端会话超时机制兜底
• 自定义弹窗无法完全替代浏览器自带弹窗，部分场景（如直接关闭标签页）只能触发默认弹窗
• 测试时需清除缓存，避免状态残留

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