React Hooks项目中beforeunload离开站点提示在移动端/平板端失效求助

为啥会这样？ #

移动端浏览器（包括Chrome移动端）对beforeunload事件的限制比PC端严多了，主要是怕开发者滥用弹窗打扰用户。大部分移动浏览器都有个规则：必须有用户主动交互过页面（比如点过按钮、输入过文字、滚动过页面这类操作），才会允许触发离开站点的提示。

怎么调整代码？ #

1. 先记录用户是否有过交互
   加个状态变量，等用户和页面有交互后再注册beforeunload事件，代码示例：

import { useEffect, useState } from 'react';

function YourComponent() {
  const [userInteracted, setUserInteracted] = useState(false);

  // 监听用户的点击、输入等交互行为
  useEffect(() => {
    const markAsInteracted = () => setUserInteracted(true);
    window.addEventListener('click', markAsInteracted);
    window.addEventListener('keydown', markAsInteracted);
    
    return () => {
      window.removeEventListener('click', markAsInteracted);
      window.removeEventListener('keydown', markAsInteracted);
    };
  }, []);

  // 只有用户交互过，才注册离开提示
  useEffect(() => {
    if (!userInteracted) return;

    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = '';
      // 有些浏览器需要返回字符串，顺手加上
      return '';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [userInteracted]);

  return <div>你的组件内容</div>;
}

2. 试试给returnValue加个非空文本
   部分移动浏览器不吃空字符串那一套，你可以设置个简短提示（虽然最终显示的还是浏览器默认文案，但能触发提示）：

e.returnValue = '离开后未保存的内容会丢失哦';

3. 得接受浏览器的差异

• Safari移动端：完全不支持自定义提示，只有当页面有未提交的表单时才会弹默认提示
• Chrome移动端：必须用户交互过才会弹
• 一些国产浏览器：可能直接屏蔽这个事件，根本不会弹

额外提醒 #

别把beforeunload当数据保存的唯一办法，最好在用户操作的时候自动存草稿（比如用localStorage或者调用后端接口存临时数据），免得因为浏览器限制丢了用户的内容。

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