本文详解如何利用 beforeunload 和 unload 事件合理控制页面卸载行为：前者用于触发浏览器原生确认对话框（不可自定义 UI），后者用于在页面真正关闭前执行关键操作（如自动提交考试表单），解决 SweetAlert 无法在 beforeunload 中异步交互的限制。
本文详解如何利用 `beforeunload` 和 `unload` 事件合理控制页面卸载行为：前者用于触发浏览器原生确认对话框（不可自定义 ui），后者用于在页面真正关闭前执行关键操作（如自动提交考试表单），解决 sweetalert 无法在 `beforeunload` 中异步交互的限制。
在开发在线考试系统等关键业务场景时，防止用户意外刷新、关闭或跳转页面至关重要。虽然开发者常希望用 SweetAlert 等美化弹窗实现“确认离开 + 条件提交”，但需明确一个核心限制：beforeunload 事件中，浏览器仅允许同步返回字符串以触发原生提示框，禁止执行异步操作（如 Swal.fire()、AJAX 请求）或阻止默认行为后等待用户交互——这是出于安全与性能的强制规范（Chrome ≥119 已移除对 event.returnValue 的依赖，但仍保留该约束）。
因此，正确方案应采用职责分离策略：
✅ beforeunload：仅用于启用原生提示
设置 event.preventDefault() 和 event.returnValue = ''（或任意非空字符串），触发浏览器内置的“要离开此页面吗？”提示。该提示不可定制样式、按钮文本或逻辑，但能有效拦截大多数意外操作。
✅ unload：用于执行最终清理或提交逻辑
该事件在页面开始卸载（包括刷新、关闭、导航）时触发，且保证同步执行完毕（注意：现代浏览器已限制其内发起的 fetch/XMLHttpRequest 可能被中断，但短时轻量请求仍可生效）。适合发送考试结束信号、保存最后答题状态等。
以下是完整、健壮的实现示例（兼容主流浏览器）：
<!-- 示例表单 -->
// 1. 启用防刷新保护（当用户开始输入后激活）
const nameInput = document.querySelector("#name");
let isExamActive = false;
nameInput.addEventListener("input", () => {
if (nameInput.value.trim() && !isExamActive) {
enableUnloadProtection();
isExamActive = true;
}
});
// 2. 注册 beforeunload —— 仅触发原生提示
function enableUnloadProtection() {
window.addEventListener("beforeunload", beforeUnloadHandler);
}
function beforeUnloadHandler(e) {
// 必须同步返回非空字符串才能触发提示（Chrome/Edge ≥119 可省略，但为兼容建议保留）
e.preventDefault();
e.returnValue = "考试进行中，刷新或离开将自动提交试卷。确定要继续吗？";
}
// 3. 在 unload 中执行自动提交（关键！）
window.addEventListener("unload", function () {
// 注意：此处不能使用 Swal 或 await，仅支持同步逻辑或快速 AJAX
const formData = new FormData(document.getElementById("examForm"));
// 使用 navigator.sendBeacon（推荐）—— 可靠发送小数据，不阻塞卸载
if (navigator.sendBeacon) {
const blob = new Blob([JSON.stringify(Object.fromEntries(formData))], {
type: "application/json"
});
navigator.sendBeacon("/api/submit-exam-auto", blob);
} else {
// 回退方案：传统 AJAX（成功率较低，仅作补充）
fetch("/api/submit-exam-auto", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(Object.fromEntries(formData)),
keepalive: true // Chrome 支持，确保请求发出
});
}
});
// 4. 【重要】用户主动提交后，移除监听避免重复触发
document.getElementById("examForm").addEventListener("submit", function () {
window.removeEventListener("beforeunload", beforeUnloadHandler);
});
⚠️ 关键注意事项：
-
beforeunload中调用Swal.fire()或$.ajax()是无效且被浏览器忽略的，会导致逻辑错乱（如你遇到的“先发请求后弹窗”）； -
unload事件内无法保证异步操作完成，故优先使用navigator.sendBeacon()发送小体积数据（如考试 ID、结束时间戳），它专为此场景设计； - 若需更复杂的提交逻辑（如上传大文件、校验答案），应在用户主动点击“交卷”时完成，而非依赖卸载事件；
- Laravel/PHP 后端无需特殊处理，只需提供
/api/submit-exam-auto接口接收并持久化数据即可。
通过合理分工：beforeunload 负责“警示”，unload + sendBeacon 负责“兜底”，即可在合规前提下最大程度保障考试数据完整性。
