本文详解如何利用 beforeunload 和 unload 事件组合实现考试场景下的页面重载防护：既向用户展示标准浏览器确认弹窗，又在用户确认离开后异步提交表单数据，规避 SweetAlert 等自定义弹窗在 beforeunload 中无法阻塞执行的限制。
本文详解如何利用 `beforeunload` 和 `unload` 事件组合实现考试场景下的页面重载防护：既向用户展示标准浏览器确认弹窗，又在用户确认离开后异步提交表单数据，规避 sweetalert 等自定义弹窗在 `beforeunload` 中无法阻塞执行的限制。
在在线考试系统中，防止学生意外刷新或关闭页面导致答题丢失至关重要。但需明确一个关键限制：浏览器出于安全策略，禁止在 beforeunload 事件中执行异步操作（如 Swal.fire()、fetch 或 $.ajax），也不允许自定义弹窗——仅支持原生的、不可样式化的确认对话框。因此，你遇到的“SweetAlert 弹出滞后”“AJAX 提前执行”等问题，本质是违反了该规范。
✅ 正确做法是采用「两阶段策略」：
-
beforeunload阶段：仅触发标准提示，告知用户“当前有未保存操作”，返回字符串即可激活浏览器确认框； -
unload阶段：在用户确认离开后（此时页面尚未销毁），立即发起轻量级同步/异步请求（注意：现代浏览器对unload中的异步请求支持有限，推荐使用navigator.sendBeacon()替代$.ajax）。
以下是生产环境推荐的实现方案：
<!-- 示例表单 -->
// 1. 启用防刷新保护（例如：当用户开始输入答案时）
const examForm = document.getElementById('examForm');
const answersTextarea = examForm.querySelector('textarea[name="answers"]');
let isExamActive = false;
answersTextarea.addEventListener('input', () => {
if (!isExamActive && answersTextarea.value.trim()) {
isExamActive = true;
window.addEventListener('beforeunload', handleBeforeUnload);
}
});
// 2. beforeunload：仅返回提示文本（必须！）
function handleBeforeUnload(e) {
const message = '⚠️ 您正在参加考试，刷新或离开页面将自动提交当前答案。确定要继续吗？';
e.preventDefault();
e.returnValue = message; // 兼容旧版浏览器（如 Chrome <p>? <strong>重要注意事项</strong>：</p>
-
sendBeacon()是目前最可靠的卸载期数据发送方式，它异步且不阻塞页面卸载，支持 POST 请求和 JSON 数据； -
beforeunload中绝对不要调用Swal.fire()、alert()、confirm()或任何异步逻辑，否则将被静默忽略或引发异常； - Laravel/PHP 后端需确保
/api/submit-exam接口能接收application/json类型的 Beacon 请求，并快速响应（建议无重定向、无大体积响应）； - 若需更高级控制（如强制锁定浏览器 Tab、检测多开），需结合服务端心跳 + WebSocket 实时状态校验，前端仅作辅助防护。
通过以上方案，你既能满足考试系统的强约束需求，又完全遵循浏览器规范，确保兼容性与可靠性。
