React中beforeunload事件监听弹窗自定义及触发范围问题

一、无法修改默认提示内容的说明 #

浏览器出于安全和用户体验一致性的强制要求，已经禁止自定义beforeunload事件的提示文案。不管你给event.returnValue设置什么字符串，或者在回调里返回什么内容，最终都会被浏览器忽略，只会显示自带的默认提示（不同浏览器文案略有差异）。这个需求目前没法实现，属于浏览器的硬性限制。

二、区分刷新和关闭标签页，仅在刷新时触发提示 #

浏览器没有直接提供区分“刷新页面”和“关闭标签页”的API，两种操作都会触发beforeunload事件。不过可以通过一些间接手段近似实现需求：

方法1：捕获快捷键触发的刷新 #

监听键盘事件，识别F5、Ctrl+R（Windows）或Cmd+R（Mac）这类刷新快捷键，标记为刷新行为后再启用提示：

import { useEffect, useState } from 'react';

function App() {
  const [isRefreshTriggered, setIsRefreshTriggered] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e) => {
      // 检测刷新快捷键
      if (e.key === 'F5' || (e.ctrlKey && e.key === 'r') || (e.metaKey && e.key === 'r')) {
        setIsRefreshTriggered(true);
      }
    };

    const unloadCallback = (event) => {
      if (isRefreshTriggered) {
        event.preventDefault();
        event.returnValue = '';
        return '';
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('beforeunload', unloadCallback);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('beforeunload', unloadCallback);
    };
  }, [isRefreshTriggered]);

  return <div>你的应用内容</div>;
}

export default App;

⚠️ 注意：这个方法只能捕获快捷键刷新，覆盖不了用户点击浏览器刷新按钮的场景。

方法2：结合页面可见性判断（近似方案） #

利用visibilitychange事件，通过页面隐藏后是否快速恢复可见来近似判断：刷新会让页面很快重新显示，关闭标签页则会一直保持隐藏。不过这种方法存在误差（比如网络延迟导致刷新缓慢时）：

import { useEffect, useState } from 'react';

function App() {
  const [shouldWarn, setShouldWarn] = useState(false);

  useEffect(() => {
    let visibilityTimeout;

    const handleVisibilityChange = () => {
      if (document.visibilityState === 'hidden') {
        // 页面隐藏后启动定时器，超过1秒未恢复则判定为关闭标签页
        visibilityTimeout = setTimeout(() => setShouldWarn(false), 1000);
      } else {
        // 页面恢复可见，判定为刷新，启用提示
        setShouldWarn(true);
        clearTimeout(visibilityTimeout);
      }
    };

    const unloadCallback = (event) => {
      if (shouldWarn) {
        event.preventDefault();
        event.returnValue = '';
        return '';
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('beforeunload', unloadCallback);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('beforeunload', unloadCallback);
      clearTimeout(visibilityTimeout);
    };
  }, [shouldWarn]);

  return <div>你的应用内容</div>;
}

export default App;

⚠️ 注意：这是近似判断，无法100%准确区分两种操作。

三、能否自定义弹窗替代浏览器默认弹窗？ #

无法直接替代beforeunload的默认弹窗，这是浏览器的安全限制，防止恶意网站强制留住用户。但可以针对可控场景实现自定义提示：

拦截可控的页面离开操作 #

比如用户点击内部链接、点击自定义刷新按钮这类你能控制的操作，提前拦截并显示自定义弹窗：

import { useState } from 'react';

function App() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(true); // 模拟存在未保存修改

  const handleLinkClick = (e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      if (confirm('你有未保存的修改，确定要离开吗？')) {
        // 用户确认后跳转
        window.location.href = e.target.href;
      }
    }
  };

  const handleRefresh = (e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      if (confirm('你有未保存的修改，确定要刷新吗？')) {
        // 用户确认后刷新
        window.location.reload();
      }
    }
  };

  return (
    <div>
      <a href="/other-page" onClick={handleLinkClick}>跳转到其他页面</a>
      <button onClick={handleRefresh}>刷新页面</button>
    </div>
  );
}

export default App;

⚠️ 局限性：这种方法只能拦截你能控制的操作，覆盖不了关闭标签页、Alt+F4这类系统级操作，这些场景还是会触发浏览器默认弹窗。

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