关闭页面的提示词怎么自定义？beforeunload的边界

关闭页面的提示词这件事，我一开始当成一个纯文案活儿。九月初给公司内部的填表工具加"防丢稿"功能，我在 returnValue 里认认真真写了二十几个字的提示语，前后改了三稿，语气、长短、要不要加感叹号都琢磨过，结果浏览器一个字都没用上。那天下午我才明白，这不是文案问题，是权限问题：从2016年起，主流浏览器就把这段话收回去了，网页只能决定问不问，说什么是浏览器的事。三行代码能写完，但边界比代码本身值得讲。

关闭页面的提示词怎么自定义：能改的只有弹不弹

写法是监听 beforeunload 事件，调用 event.preventDefault() 并给 event.returnValue 赋一个非空字符串，浏览器就会在用户关闭标签页或跳走前弹确认框；但弹出来的文字由浏览器决定，你赋什么都没用。先给能直接抄的代码：

window.addEventListener('beforeunload', (e) => {
  if (!formIsDirty) return;   // 没改过内容就不拦
  e.preventDefault();
  e.returnValue = '';         // 赋什么都行，浏览器不看
});

returnValue 这个赋值更像一个仪式。你写空字符串可以，写"您有未保存的草稿，确定要离开吗"也可以，Chrome 看到非空就走弹窗流程，文案用它自己那句标准话。我第一版还专门开了个会讨论措辞，第二稿试着缩短到十二个字，第三稿加了敬语，全部白费。挺离谱的。转念一想也合理：这个弹窗太好拿去骚扰用户了，浏览器干脆把嘴堵上，只留一个动作给你。

我实测的边界：谁听你的，谁压根不弹

实测结论：桌面端 Chrome、Edge、Firefox、Safari 全部只显示系统标准文案，自定义一律失效；移动端更狠，iOS Safari 和安卓 Chrome 基本不触发 beforeunload，弹窗压根不出现。下面是我9月2日到3日跑下来的对照：

测试同事拿一台 iPhone 和一台小米各试了一遍，填完表格直接关页面，毫无反应。我这边的 Chrome 128 上还撞见另一个坑：新标签页打开，什么都没点，三秒内关掉，弹窗同样不来。查了资料才知道，Chrome 要求页面有过用户交互——点一下、敲一次键盘、滚一下屏幕都算——才允许弹这个框，专门防那种一进站就拦人退路的骚操作。这个设计我服气。桌面三兄弟里 Firefox 行为最规矩，触发稳定，文案也统一，反而最省心。

老实讲，那天最费时间的不是写代码，是搞清楚"弹与不弹"的条件组合，比写逻辑本身费劲十倍。

真正值得自定义的不是文案，是触发时机

把 beforeunload 当开关用：只有表单处于改动过的状态才拦截，刚打开、刚保存完都不弹；再配一个 input 事件维护的脏标记，保存成功就清掉。这决定了用户会不会把你的弹窗当成噪音。

我们的做法很简单：监听输入框的 input 事件，一有改动就把 dirty 标记置真，保存请求成功返回后清掉，beforeunload 里只看这个标记。内部埋点拉了一周数据：改成条件拦截之前，弹窗日均出现约240次；改完降到70次上下，群里再没人抱怨"关个页面还要点两下"。不夸张地说，弹得少，才弹得有分量。

话说回来，肯定有人想用自家风格的自定义模态框把原生弹窗整个换掉，做成和产品一致的样式。我试了下，此路不通：页面卸载路径上只允许浏览器原生弹窗这一种 UI，在 beforeunload 里调 alert 或 confirm 会被静默拦掉，控制台还会给你一行 Blocked confirm(...) 的警告。想在关页面前保数据，可靠的是 pagehide 和 visibilitychange 这类事件，它们在移动端表现好得多，但同样一个框都弹不出来，只能默默把草稿写进 localStorage，等用户回来再恢复。

回到开头那三稿文案。它们最终一行都没上线，上线的反而是三个条件判断和一周的埋点数据。做关闭页面的提示词这件事，现代浏览器把"说什么"收走了，只把"问不问"留给开发者——想清楚什么时候值得打扰用户，比琢磨那句话怎么写重要得多。

常见问题

beforeunload 里能用 alert 或 confirm 弹出自定义内容吗？

不能。浏览器会静默拦截这类调用，Chrome 控制台会提示 Blocked confirm(...) during beforeunload。卸载路径上的 UI 只有原生弹窗一种，这是刻意的安全设计，没有任何配置能绕过。

为什么用户打开页面没点任何东西就关闭时，提示不出现？

Chrome 要求页面先有"粘性激活"，也就是用户至少点过一次、敲过一次键盘或滚动过页面，beforeunload 弹窗才会出现。这是防止进站就拦截的滥用行为，无法通过设置关闭。

手机浏览器上怎么实现关闭页面的提示词效果？

移动端别指望确认框，iOS Safari 和安卓 Chrome 基本不触发 beforeunload。可行方案是监听 visibilitychange 和 pagehide，在页面进入后台时把未保存内容写进 localStorage 或发请求存草稿，用户回来时再恢复。

returnValue 和在监听函数里 return 一个值，效果一样吗？

在现代 Chrome 和 Firefox 里效果等价，稳妥起见建议两者都写并配上 preventDefault，照顾一些老内核的套壳浏览器。老代码里常见的 window.onbeforeunload = () => '提示语' 写法，如今同样只剩"弹或不弹"一个效果。

弹窗里"离开"和"留下"两个按钮的文案能改吗？

不能，按钮文字跟随操作系统语言，中文环境显示"离开"和"留下"或相近译法，开发者一个字都改不了。你能控制的范围到"弹不弹"为止。

延伸阅读

• 同批次的前端实战：JS 敏感词过滤的写法与排查思路