这个事件会在浏览器即将卸载（离开）当前页面时触发，我们可以利用它来向用户显示一个确认对话框，询问用户是否确定要离开。
（图片来源网络，侵删）
核心方法：window.onbeforeunload
这是最常用和最标准的方法。
实现步骤
- 为
window对象添加onbeforeunload事件监听器。 - 在事件处理函数中,返回一个字符串，这个字符串就是用户在离开页面时浏览器会显示在确认对话框中的提示信息。
- 重要提示：出于安全考虑，现代浏览器（如 Chrome, Firefox, Edge 等）会忽略你自定义的提示文本，而是显示自己预设的文本（“您所做的更改可能不会被保存。”），返回一个非
null的值（任何字符串）是触发这个对话框的关键。
代码示例
你可以将以下代码放在你的 HTML 文件的 <script> 标签中，或者链接一个外部的 .js 文件。
window.addEventListener('onbeforeunload', (event) => {
// 设置要返回的提示文本
// 注意：现代浏览器会忽略这个文本，并显示自己的固定文本
const message = "您确定要离开此页面吗？未保存的数据将会丢失。";
// 为了兼容性，我们同时使用 event.returnValue 和 return
// 这是旧版 IE 浏览器的要求
event.returnValue = message;
// return 语句是现代浏览器的标准做法
return message;
});
// 或者使用更简洁的属性赋值方式（效果相同）
// window.onbeforeunload = function(event) {
// return "您确定要离开此页面吗？未保存的数据将会丢失。";
// };
完整 HTML 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">防止页面离开示例</title>
<style>
body { font-family: sans-serif; padding: 20px; }
#status { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h1>这是一个受保护的页面</h1>
<p>尝试点击浏览器的前进/后退按钮，或者直接在地址栏输入一个新网址并按回车。</p>
<p>浏览器会弹出一个确认对话框，询问您是否确定要离开。</p>
<div id="status">状态：页面加载中...</div>
<script>
// 页面加载完成后执行
window.addEventListener('load', () => {
document.getElementById('status').innerText = '状态：页面已加载，离开保护已激活。';
});
// 核心代码：监听页面离开事件
window.addEventListener('onbeforeunload', (event) => {
// 定义提示信息
const message = "您确定要离开吗？您的表单数据尚未保存。";
// 这是触发对话框的关键
// event.returnValue 和 return 都是为了兼容性
event.returnValue = message;
return message;
});
</script>
</body>
</html>
高级用法：条件性阻止离开
在很多实际场景中,我们并不想阻止用户在所有情况下离开页面，而只想在他们进行了某些操作（比如填写了表单但未提交）后才阻止，这时，我们可以使用一个标志位（flag）来控制。
实现思路
- 设置一个全局变量,
isDirty（意为“内容已修改”），初始值为false。 - 当用户进行需要保护的操作时（在表单输入框中输入内容），将
isDirty设置为true。 - 当用户保存了数据或完成了操作后,将
isDirty设置为false。 - 在
onbeforeunload事件处理函数中，检查isDirty的值，只有当它为true时，才返回提示信息来阻止离开。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">条件性防止页面离开</title>
</head>
<body>
<h1>编辑文档</h1>
<form id="myForm">
<label for="documentContent">文档内容：</label>
<textarea id="documentContent" rows="10" cols="50"></textarea>
<br>
<button type="button" id="saveButton">保存并关闭保护</button>
</form>
<script>
// 1. 定义一个标志位
let isDirty = false;
const textarea = document.getElementById('documentContent');
const saveButton = document.getElementById('saveButton');
// 2. 监听用户输入，将标志位置为 true
textarea.addEventListener('input', () => {
isDirty = true;
console.log('内容已修改，保护激活。');
});
// 3. 监听保存按钮点击，将标志位置为 false
saveButton.addEventListener('click', () => {
// 这里可以添加实际的保存逻辑，AJAX 请求
alert('文档已保存！');
isDirty = false;
console.log('内容已保存，保护关闭。');
});
// 4. 在 onbeforeunload 事件中检查标志位
window.addEventListener('onbeforeunload', (event) => {
if (isDirty) {
const message = "您有未保存的更改，确定要离开吗？";
event.returnValue = message;
return message;
}
// isDirty 为 false，则什么都不做，允许用户正常离开
});
</script>
</body>
</html>
重要注意事项和局限性
- 用户体验：不要滥用此功能！ 过度使用会非常烦人，导致用户反感，请仅在确实有必要保护用户数据丢失的情况下使用（在线编辑器、表单填写等）。
- 浏览器兼容性：
onbeforeunload事件得到了所有主流浏览器的广泛支持。- 旧版 Internet Explorer (IE8 及更早版本) 使用
window.onbeforeunload = function() { ... }的方式更可靠。 - 如代码示例中所示,同时使用
event.returnValue和return语句可以确保最好的兼容性。
- 无法强制阻止：此方法不能 100% 强制用户留在页面上，用户可以通过确认对话框选择“离开”，或者在浏览器的设置中禁用 JavaScript，它只是一个“最后的提醒”。
- 不可自定义提示文本：如前所述，出于安全原因，浏览器厂商已经统一了确认对话框的文本，开发者无法自定义，你提供的字符串会被忽略。
- 对
location.href或location.replace的无效性：这个方法不会阻止你的 JavaScript 代码通过window.location.href = 'new_url'或window.location.replace('new_url')来主动导航到新页面，它只响应用户或浏览器发起的导航行为（如点击链接、输入地址、刷新、关闭标签页等）。
| 方法 | 描述 | 适用场景 |
|---|---|---|
window.onbeforeunload |
核心方法，在用户即将离开页面时触发，可弹出一个浏览器原生的确认对话框。 | 防止用户意外离开，保护未保存的表单数据、编辑内容等。 |
条件性 onbeforeunload |
结合一个标志位变量（如 isDirty），只在特定条件下（如表单被修改）才触发阻止逻辑。 |
更精细的控制，只在用户真正有未保存工作时才提示。 |
对于绝大多数“设置网页页面不能被替换”的需求，使用 window.onbeforeunload 事件是正确且有效的解决方案。
（图片来源网络，侵删）
