JavaScript关闭浏览器弹出自定义提示框不生效，该如何解决？

你遇到的自定义提示不生效的问题是现代浏览器的安全策略强制限制，没有任何办法可以在所有主流浏览器实现关闭/刷新页面时弹出你自定义内容的提示。

原因说明 #

从2016年左右开始，Chrome、Firefox、Safari、Edge等主流浏览器陆续取消了beforeunload事件自定义提示文本的支持，仅允许开发者触发浏览器内置的固定提示框，目的是避免恶意网站用虚假提示误导用户。同时所有浏览器都会拦截beforeunload事件中的alert()、confirm()、prompt()调用，所以你写的这部分代码不会生效。

可用的实现方案 #

1. 合法触发默认关闭提示（仅能触发，无法改内容） #

如果你只需要提示用户确认是否要离开页面，不需要自定义文本，可以用如下标准兼容写法：

window.addEventListener('beforeunload', function (e) {
  // 兼容部分旧浏览器
  e = e || window.event;
  e.preventDefault();
  // returnValue设任意值都不会被读取，仅用来触发提示
  e.returnValue = '';
  return '';
});

2. 自定义内容的替代方案 #

如果必须要展示"你今天已完成xxx项工作！"这类自定义内容，只能换触发场景，不要绑定到浏览器关闭动作上：

• 当用户完成最后一项工作时，立即在页面内弹出自定义弹窗提示
• 页面添加固定的状态展示区域，实时更新用户当天已完成的工作数量
• 监听页面内可控制的跳转、退出按钮点击事件，先弹出你自定义的提示，用户确认后再执行后续操作

其他说明 #

只有已经停止维护的IE8及更早版本的IE浏览器支持beforeunload自定义文本，现在几乎没有用户使用这类浏览器，无需做兼容。

内容的提问来源于stack exchange，提问作者dueToLife