JavaScript页面刷新beforeunload事件自定义提示文案不生效问题

你的代码写法本身没有错误，自定义文案不生效是现在主流浏览器的统一限制，已经不支持开发者修改beforeunload事件的提示内容了。

原因说明 #

• 早年的旧版浏览器确实支持通过return 自定义字符串或者给event.returnValue赋值自定义内容修改提示文案，但由于大量网站滥用该功能弹出恶意诱导信息，Chrome、Firefox、Safari、Edge等所有主流浏览器都在后续版本中移除了该能力，现在无论你设置什么自定义内容，浏览器都会忽略，只显示内置的统一默认提示。
• 提示的语言由用户的浏览器系统语言决定，开发者无法修改，你看到的是英文提示是因为你的浏览器默认语言为英文。

目前可实现的能力 #

你现在只能控制是否弹出这个关闭/刷新提示，无法修改提示内容，兼容所有现代浏览器的写法参考：

// 定义事件处理函数
const beforeUnloadHandler = (event) => {
  event.preventDefault();
  // 此处赋值任意值都不会被浏览器读取，仅做兼容触发提示的标记用
  event.returnValue = '';
  return '';
};

// 绑定事件
window.addEventListener('beforeunload', beforeUnloadHandler);

// 表单提交时移除提示，避免正常提交表单时弹出提醒
$(document).on('submit', 'form', () => {
  window.removeEventListener('beforeunload', beforeUnloadHandler);
});

额外注意事项 #

只有用户在页面上有过交互行为（比如点击、输入内容、滚动页面等）后，这个提示才会被触发，用户打开页面未进行任何操作就关闭/刷新时，浏览器不会弹出该提示，这也是浏览器的默认规则，开发者无法修改。

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