如何在表单页面阻止浏览器刷新并显示自定义弹窗？

首先明确浏览器安全规则限制：网页端无法直接拦截用户点击浏览器自带刷新按钮的操作、并弹出完全自定义的业务DOM弹窗，所有合法的刷新拦截能力都基于浏览器标准的beforeunload事件实现，离开确认弹窗的UI由浏览器统一管控，仅可通过API配置对应拦截的提示逻辑。

核心实现步骤 #

• 注册全局的离开拦截事件
  给window对象绑定beforeunload监听，和表单的未保存状态做联动：只有当用户修改过表单内容、存在未提交的数据时，才触发拦截逻辑：

  // 动态标记表单是否存在未提交修改，可在用户编辑表单内容时实时更新这个值
  let isFormDirty = true;
  
  window.addEventListener('beforeunload', (event) => {
    if (isFormDirty) {
      event.preventDefault();
      // 兼容各浏览器的拦截配置，传入的提示文案会被部分旧版浏览器展示在原生弹窗中
      event.returnValue = '若刷新页面，您将无法使用当前表单';
    }
  });
  

• 自定义业务提示的适配方案
  目前主流版本的Chrome、Edge、Safari出于反钓鱼的安全考虑，不会在原生离开确认弹窗中展示网页传入的自定义文案，只会统一展示"离开页面/留在页面"的原生选项。如果需要弹出业务侧设计的自定义提示弹窗：

  注意：不要在beforeunload事件回调中直接渲染DOM弹窗，这类弹窗会被浏览器的弹窗拦截机制直接屏蔽，且不符合浏览器交互规范
  正确的适配逻辑为：当用户在原生确认弹窗中选择"留在页面"时，在页面中实时渲染自定义提示弹窗，展示要求的固定文案*"若刷新页面，您将无法使用当前表单"*

• 常见问题规避
  • 不要尝试通过监听键盘快捷键（F5、Ctrl+R、Cmd+R）实现刷新拦截，这类快捷键会被浏览器进程直接抢占，网页层的事件监听器无法捕获对应操作
  • 不要在无表单修改的场景下触发拦截：如果用户没有编辑任何内容就弹出刷新拦截提示，会严重影响页面体验

操作示意参考：

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