如果在 ReactJS 中关闭或刷新页面则显示警告

Question

我的问题是我需要用户确认是否要继续关闭或刷新页面。如果他按

No

，它不会关闭也不会刷新页面。

请看一下我到目前为止的代码：

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);

Answer 1

如果您想在离开页面之前显示某种确认信息，请遵循 beforeunload 事件 指南

根据规范，显示确认对话框 事件处理程序应该对事件调用 PreventDefault()。

但请注意，并非所有浏览器都支持此方法，有些浏览器 相反，要求事件处理程序实现两个旧版本之一 方法：

• 将字符串分配给事件的 returnValue 属性
• 从事件处理程序返回一个字符串。

为了对抗不需要的弹出窗口，浏览器可能不会显示创建的提示 在

beforeunload

事件处理程序中，除非页面已交互 与，或者甚至可能根本不显示它们。

HTML 规范规定调用

window.alert()

，

window.confirm()

和

window.prompt()

方法可能会被忽略 这个事件。有关更多详细信息，请参阅HTML 规范。

我刚刚在 chrome 和 safari 中测试了它，它有效。我没有 Windows 盒子，但这应该涵盖大多数情况。

useEffect(() => {
  const unloadCallback = (event) => {
    event.preventDefault();
    event.returnValue = "";
    return "";
  };

  window.addEventListener("beforeunload", unloadCallback);
  return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);

Answer 2

我想你正在寻找这个。

https://dev.to/eons/detect-page-refresh-tab-close-and-route-change-with-react-router-v5-3pd

浏览器刷新、关闭选项卡以及后退和前进按钮均已解释。

试试这个：

    useEffect(()=>{
    const unloadCallback = (event) => {      
        const e = event || window.event;
        //console.log(e)
        e.preventDefault();
        if (e) {
          e.returnValue = ''
        }
        return '';
          
    };
    
    window.addEventListener("beforeunload", unloadCallback);
    return () => {
      //cleanup function
      window.removeEventListener("beforeunload", unloadCallback);
    }
    
  },[])