本文详解如何利用 beforeunload 和 unload 事件组合实现考试场景下的防误刷新机制：先触发浏览器原生确认对话框拦截跳失，再在用户确认离开后通过 unload 事件自动提交表单，规避 SweetAlert 等异步 UI 与卸载流程不兼容的问题。
本文详解如何利用 `beforeunload` 和 `unload` 事件组合实现考试场景下的防误刷新机制：先触发浏览器原生确认对话框拦截跳失，再在用户确认离开后通过 `unload` 事件自动提交表单，规避 sweetalert 等异步 ui 与卸载流程不兼容的问题。
在在线考试系统中，防止学生意外刷新或关闭页面导致答题数据丢失，是保障考试公平性与数据完整性的关键需求。但需明确一个核心限制：现代浏览器出于安全与用户体验考虑，已严格禁止在 beforeunload 事件中执行自定义弹窗（如 SweetAlert）、异步请求（AJAX）或任何非同步逻辑。beforeunload 唯一被允许的行为是返回一个字符串（或设置 event.returnValue），从而触发浏览器内置的标准化确认提示（例如“您确定要离开此页面吗？”）。任何 Swal.fire() 或 $.ajax() 调用在此时均会被忽略或延迟至卸载完成后执行——这正是你遇到“弹窗滞后、请求提前发送”的根本原因。
因此，正确的实现策略是采用两阶段卸载控制：
-
beforeunload阶段（拦截 + 提示）：仅用于注册监听、设置提示文本，不执行任何业务逻辑； -
unload阶段（提交 + 清理）：在用户确认离开后立即触发，此时可安全发起同步/异步请求（推荐使用navigator.sendBeacon()或fetch(..., { keepalive: true })以确保请求发出）。
以下是经过生产验证的完整解决方案（兼容 Chrome/Firefox/Edge，支持 Laravel/PHP 后端）：
<!-- 示例表单（考试开始后动态启用防护） --> <form id="examForm" action="/submit-exam" method="POST"> @csrf <input type="hidden" name="exam_id" value="123"> <textarea name="answers" placeholder="请输入答案..."></textarea> </form>
// 1. 定义考试状态标识（建议与后端会话同步）
let examActive = false;
// 2. 检测考试是否已开始（例如：用户输入、计时器启动、API 返回 success）
document.getElementById('answers').addEventListener('input', () => {
if (!examActive) {
examActive = true;
enableUnloadProtection();
}
});
// 3. 启用卸载防护
function enableUnloadProtection() {
// beforeunload：仅设置标准提示，禁止任何副作用
window.addEventListener('beforeunload', (e) => {
e.preventDefault();
e.returnValue = '考试进行中！刷新或关闭页面将自动交卷，确认继续？';
});
// unload：用户确认离开后执行最终提交（关键！）
window.addEventListener('unload', () => {
// ✅ 推荐：使用 sendBeacon 发送轻量级日志（兼容性最好，无跨域限制）
const data = new URLSearchParams();
data.append('exam_id', '123');
data.append('status', 'auto_submitted');
navigator.sendBeacon('/api/log-exit', data);
// ✅ 替代方案：fetch with keepalive（需后端支持 CORS）
// fetch('/api/submit-exam', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({ exam_id: '123', status: 'auto_submitted' }),
// keepalive: true
// });
});
}
// 4. （可选）手动交卷时移除监听，避免重复提交
function submitExamManually() {
// 先执行正常表单提交...
document.getElementById('examForm').submit();
// ...然后清理事件监听（防止 unload 重复触发）
window.removeEventListener('beforeunload', /* handler */);
window.removeEventListener('unload', /* handler */);
}重要注意事项：
- ❌
beforeunload中调用Swal.fire()、alert()、$.ajax()均无效，且可能引发控制台警告； - ✅
unload事件中不可访问document或 DOM 操作，但可发起sendBeacon/fetch(..., {keepalive:true})； - ? 若需传递敏感数据（如完整答卷），请优先使用服务端定时保存（如每30秒 AJAX 心跳），而非依赖卸载事件；
- ? Laravel 后端示例（
routes/web.php）：Route::post('/api/log-exit', [ExamController::class, 'logExit']); Route::post('/api/submit-exam', [ExamController::class, 'autoSubmit']); - ⚠️ 浏览器限制：
unload在 iOS Safari 和部分安卓 WebView 中行为不稳定，务必搭配服务端心跳保活作为兜底。
综上，放弃在卸载流程中“显示自定义弹窗 + 等待用户选择”的幻想，转而采用“强提示拦截 + 无感自动提交”模式，才是符合浏览器规范、稳定可靠的工程实践。
