使用beforeunload事件可防止用户意外离开页面。当用户尝试刷新、关闭或跳转时，该事件触发并弹出浏览器默认确认对话框，需在事件中调用preventDefault()并设置returnValue为空字符串以兼容各浏览器。实际应用中应结合状态标记（如isDirty）判断是否提示，仅在表单有未保存更改时显示，避免频繁打扰。但受浏览器限制，自定义提示内容不可见，移动端支持差，且需用户交互后才稳定触发，故应配合自动保存、本地缓存等机制提升数据安全。
在用户操作未保存时，防止意外刷新或关闭页面是常见需求。JavaScript 提供了原生方式来实现页面刷新或离开前的确认提示，主要通过监听 beforeunload 事件完成。
使用 beforeunload 事件实现刷新/关闭提示
当用户尝试刷新、关闭页面或跳转到其他链接时，beforeunload 事件会被触发。你可以在该事件中返回一个字符串（现代浏览器通常会忽略自定义文本，显示默认提示），浏览器将弹出确认对话框。
示例代码：
window.addEventListener('beforeunload', function (e) {
// 阻止默认行为（必须）
e.preventDefault();
// 兼容性写法：设置返回值
e.returnValue = ''; // Chrome 等浏览器需要此行
});
这样，只要触发页面离开行为，浏览器就会弹出类似“您确定要离开此页面吗？”的提示，由用户选择是否继续。
立即学习“Java免费学习笔记（深入）”；
何时显示提示？根据实际状态控制
并不是所有情况都需要提示。通常只在表单有未保存更改时才提示。可以通过设置一个标记变量来控制。
示例逻辑：
- 初始状态：
let isDirty = false; - 监听输入框变化，一旦有输入则设置
isDirty = true; - 在 beforeunload 中判断该状态
let isDirty = false;
// 表单任意输入触发
document.getElementById('myForm').addEventListener('input', function () {
isDirty = true;
});
window.addEventListener('beforeunload', function (e) {
if (isDirty) {
e.preventDefault();
e.returnValue = '';
}
});
这样可以避免无意义的打扰，提升用户体验。
注意事项和浏览器限制
现代浏览器出于安全和用户体验考虑，对 beforeunload 做了一些限制：
- 不能完全自定义弹窗内容，浏览器统一提示语
- 只有用户有交互后才更可能正确触发（部分浏览器策略）
- 移动端支持较弱，部分浏览器可能直接忽略
- 如果页面被加入白名单（如 PWA），可能不会弹出
因此，这个功能更适合用作辅助提醒，不能完全依赖它阻止用户离开。
基本上就这些。合理使用 beforeunload 能有效减少数据丢失风险，但要结合及时保存、本地缓存等策略一起使用才更可靠。
