如何替换浏览器默认重载弹窗为自定义弹窗？

想要在Chrome或任意浏览器刷新特定页面时显示自定义弹窗，由于无法修改默认的“Reload site? Changes you made may not be saved”提示语，需要完全替换该弹窗。

现有尝试的代码存在以下问题：

1. 使用beforeunload事件时，设置this.showReloadPopup = true首次不生效，仅默认弹窗出现后才起作用：

...
mounted() {
  window.addEventListener('beforeunload', this.beforeUnload)
},
methods: {
  async beforeUnload(event) {
    // this.showReloadPopup = true // 首次不生效，仅默认弹窗出现后才有效
    event.preventDefault()
    event.returnValue = ''
  },
},
...

2. beforeRouteLeave钩子仅在页面导航切换时生效，刷新页面时无法触发：

beforeRouteLeave(to, from, next) {
  this.nextRoute = next
  next(false)
  this.showReloadPopup = true
},

想了解：是否存在类似beforeRouteReload的钩子？或者有没有办法得知默认弹窗中的重载按钮是否被点击？

一、为什么beforeunload里直接显示自定义弹窗首次无效？ #

浏览器对beforeunload事件有严格安全限制：不能直接在事件回调中触发自定义弹窗，必须通过event.preventDefault()和设置event.returnValue触发浏览器默认弹窗——这是浏览器为防止恶意网站滥用弹窗强制用户停留的防护机制，因此直接设置this.showReloadPopup = true会被浏览器拦截，导致首次不生效。

二、实现完全替换默认弹窗的可行方案 #

要绕开beforeunload的限制，需通过拦截可控制的刷新动作，提前触发自定义弹窗：

1. 拦截键盘、右键等刷新入口

监听键盘快捷键（F5/Ctrl+R/Cmd+R）和右键刷新动作，在用户触发时直接显示自定义弹窗，再决定是否执行刷新：

mounted() {
  // 监听键盘刷新事件
  document.addEventListener('keydown', this.handleKeyRefresh)
},
beforeUnmount() {
  // 移除监听避免内存泄漏
  document.removeEventListener('keydown', this.handleKeyRefresh)
},
methods: {
  handleKeyRefresh(e) {
    // 匹配F5、Ctrl+R、Mac端Cmd+R
    const isRefresh = e.key === 'F5' || (e.ctrlKey && e.key === 'r') || (e.metaKey && e.key === 'r')
    if (isRefresh) {
      e.preventDefault()
      this.showCustomPopup()
    }
  },
  showCustomPopup() {
    // 这里替换为你的自定义弹窗逻辑，比如控制组件显示
    // 示例：用原生confirm模拟，实际替换成你的弹窗组件
    if (confirm('确定要刷新吗？未保存的修改会丢失')) {
      this.isConfirmedReload = true
      window.location.reload()
    }
  },
  async beforeUnload(event) {
    // 处理地址栏刷新按钮的情况：如果用户未通过自定义弹窗确认，触发默认弹窗
    if (!this.isConfirmedReload) {
      event.preventDefault()
      event.returnValue = ''
    }
  },
}

2. 关于beforeRouteReload钩子

Vue Router中不存在beforeRouteReload这类钩子，因为页面刷新属于浏览器级别的动作，会导致整个Vue应用重新加载，路由钩子仅在单页应用的路由切换场景下生效。

3. 无法监听默认弹窗的按钮点击

浏览器未提供API监听beforeunload默认弹窗的“重载”或“取消”按钮点击事件，这也是安全限制的一部分，防止网站追踪用户操作意图，因此无法通过这种方式触发自定义弹窗。

三、总结 #

要尽可能替换刷新时的默认弹窗，核心方案是：

• 拦截所有可控制的刷新入口（键盘快捷键、页面内刷新按钮），触发自定义弹窗后再执行刷新；
• 地址栏刷新按钮无法拦截，只能保留默认弹窗（若要完全替换，需通过嵌入iframe等复杂方式，兼容性差不推荐）。

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