可以使用 beforeunload 事件在用户关闭页面、刷新或跳转前触发浏览器原生确认对话框；需返回非空字符串，但提示语不可自定义，且仅在用户交互后生效，无法阻止卸载。
可以使用 beforeunload 事件，在用户尝试关闭页面、刷新或跳转前触发提示。
监听 beforeunload 事件
该事件在页面即将卸载前触发，浏览器会自动弹出原生确认对话框（内容不可自定义，仅显示默认提示语）。
- 需在事件处理函数中返回一个非空字符串（现代浏览器已不显示该字符串，但返回值仍是必需的）
- 仅适用于用户主动操作（如点击关闭按钮、输入新 URL、刷新），不适用于脚本调用
window.close()或某些 SPA 路由跳转 - 不能阻止页面卸载，只能触发浏览器默认确认弹窗
基本写法示例
以下代码会在有未保存数据时提示用户：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
let hasUnsavedChanges = false;
// 某处修改数据时设为 true，例如表单输入
document.getElementById('myInput').addEventListener('input', () => {
hasUnsavedChanges = true;
});
window.addEventListener('beforeunload', (event) => {
if (hasUnsavedChanges) {
// 触发浏览器确认弹窗（返回值是必需的）
event.returnValue = '您有未保存的数据，确定要离开吗？';
return event.returnValue;
}
});
注意事项与限制
现代浏览器（Chrome、Firefox、Edge 等）出于用户体验和安全考虑，做了严格限制：
立即学习“Java免费学习笔记（深入）”；
- 只允许在用户与页面发生交互（如点击、输入）后才启用
beforeunload提示 - 返回的字符串不会显示在弹窗中，统一显示为浏览器内置提示（如“要离开此站点吗？更改可能不会被保存。”）
- 无法通过 JS 自定义弹窗样式或按钮文字，也不能阻止默认行为（只能询问）
- 移动端 Safari 和部分 Android 浏览器可能完全忽略该事件
替代方案建议
若需更可控的体验，可结合以下方式：
- 在关键操作（如离开表单页）前，用
confirm()或 UI 模态框主动询问（需手动触发，不能拦截关闭） - 定期自动保存草稿到
localStorage，降低丢失风险 - 对 SPA 应用，监听路由变化（如 Vue Router 的
beforeRouteLeave或 React Router 的useBlocker）做更精准控制
