前端关闭页签拦截指南：从入门到放弃（附心路历程）

　　　之前接到一个产品需求——当用户尝试关闭页签时，拦截操作并提示"内容可能丢失"。听起来简单？看我如何在这需求里摸爬滚打吧。

一、青铜方案：最原始的拦截

　　调研过程：
　　　　首先想到beforeunload事件，MDN文档显示可以通过设置returnValue触发浏览器默认提示：

window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = ''; // Chrome需要这个
  return '你有未保存的内容！'; // 然并卵，现在浏览器都不显示自定义文案了
});

　　　　MDN 说这种写法兼容性好？等等，为什么 Chrome 83+ 直接无视我的文案？Safari 居然连默认提示都不弹？！Edge 倒是老实显示了，但用户说这提示长得像病毒警告..

　　魔幻现实：

• • ✅ 10行代码快速实现

• • ✅ IE11/旧Edge：完整显示自定义文案

• • ⚠️ Firefox：显示"此页面想询问您是否离开" + 自定义文案

• • ❌ Chrome 83+ / Safari：固定显示"您所做的更改可能未保存"

• • 💥 移动端：安卓Chrome直接失效，iOS Safari间歇性抽风

　　代码考古：

// 上古时代完美兼容方案（2015年前有效）
window.onbeforeunload = function() {
  return "系统可能无法保存您的修改"; // 直接return字符串即可
};
// 现在这样写会被浏览器静默拦截，宛如在对空气说话

　　教训总结：

• 1. 1. 浏览器联盟早在2016年就统一限制自定义文案

     2. 事件绑定方式影响优先级：addEventListener > onbeforeunload

     3. 部分广告拦截插件会直接屏蔽该事件

二、白银方案：智能拦截模式

　　升级思路：
　　　　不如只在有未保存数据时触发？再加个弹窗拦截表单提交？

let isDirty = false;

// 监听数据变化
inputField.addEventListener('input', () => isDirty = true);

// 加强版拦截
window.addEventListener('beforeunload', (e) => {
  if (!isDirty) return;
  
  e.preventDefault();
  e.returnValue = '';
});

// 拦截表单提交
form.addEventListener('submit', () => {
  isDirty = false;
});

　　翻车现场：
　　　　用户点击内部路由链接怎么也会弹窗？产品说提交订单后不应该弹窗？呃。。。忘记在成功提交后重置状态了！

　　优化方案：

1. 1. 添加SPA路由跳转拦截

   2. 表单提交成功后自动重置isDirty

   3. 使用performance.navigation区分刷新和关闭

三、王者方案：终极保命策略

　　需求升级：
　　　　产品经理："我们要自定义漂亮弹窗！要统计用户离开率！要..."

　　现实打击：
　　　　浏览器根本不允许在卸载事件里异步操作！自定义弹窗？不存在的！

　　曲线救国方案：

// 心跳监测
let heartbeat = new Date().getTime();

// 每5秒保存到localStorage
setInterval(() => {
  if (!isDirty) return;
  localStorage.setItem('autoSave', editorContent);
  heartbeat = new Date().getTime();
}, 5000);

// 关闭时尝试上报
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/api/log', `用户离开时间:${new Date()}`);
  }
});

　　配套措施：

1. 1. 页面加载时检查localStorage是否有自动保存内容

   2. 使用Service Worker缓存数据

   3. 添加离屏提示："检测到上次有未保存内容"

　　灵魂感悟：
　　　　原来最好的拦截是不拦截，而是让用户无感知的自动保存...

四、总结

1. 浏览器安全策略是爸爸：想自定义弹窗？洗洗睡吧

2. 用户体验优先：频繁弹窗的拦截率高达87%，用户流失率更高达100%

3. 防御式编程：考虑所有卸载场景（关闭、刷新、导航、崩溃）

4. 终极方案：自动保存+离屏提示+数据上报三件套

　　最后：
　　　　当产品再次提出"要像某云文档那样优雅拦截"时，我默默打开了招聘网站——后来才知道，那些"优雅方案"都是自家客户端实现的...