Javascript 反应|如何检测页面刷新（F5）

我正在使用。我需要检测

页面刷新

。当用户点击刷新图标或按F5时，我需要了解事件

我尝试使用javascript函数

我在卸载之前使用了javascript函数

，

仍然不走运

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

---

这里我有完整的代码

您的代码似乎工作正常，您的警报无法工作，因为您没有停止刷新。如果您

console.log（'hello'）

将显示输出

更新---

这将停止用户刷新，但这取决于您希望发生什么

componentDidMount() {
    window.onbeforeunload = function() {
        this.onUnload();
        return "";
    }.bind(this);
}

---

将其放入构造函数中：

if (window.performance) {
  if (performance.navigation.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

---

它将起作用，请参见上的此示例。

不幸的是，由于performance.navigation.type为

最新的API是实验性ATM。

---

作为一种解决方法，我只能建议在redux（或您使用的任何东西）存储中保存一些值，以指示重新加载后的状态，并在第一次路由更改时更新它，以指示路由不是因为刷新而更改的。

如果您使用的是redux或上下文API，那么这非常容易。您可以检查REDUX或上下文状态变量。当用户刷新页面时，它会重置上下文或REDUX状态，您必须再次手动设置它们。因此，如果它们未设置或不等于您给定的初始值，则可以假定页面已刷新。

如果您使用的是React Hook，则可以使用Effect在组件中进行以下更改。它对我有用

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

---

这实际上非常简单，每当你重新加载页面时，它都会添加默认的警报

功能部件 类组件

---

只要条件为

true

，您就可以将验证设置为仅添加警报

功能部件 类组件

---

---

我可以调用

onUnload

函数中的任何函数吗？因为我试过了，它似乎不起作用。你需要用一些东西来提示用户停止刷新。您想在OnLoad的

中放置什么功能？我将用一个例子更新我的答案。只有在页面刷新时，我才需要调用这样的函数
this.props.actions.loaddata（）
谢谢。我想，它在页面加载之前已经被调用了。在用户刷新页面后，我需要一个比我更好的解决方案。为什么不检查
e.keyCode===116
，这是F5键？下面是一个如何做到这一点的示例：可能有两种情况浏览器刷新按钮单击和F5按您的代码工作正常，但存在问题。它甚至在页面更改时也会被触发。不仅页面刷新。我只需要刷新页面，只需更改条件的内容，我正在使用react路由器。当我切换菜单时，它被触发请查看警报文本，如果页面刷新，将触发警报“此页面已重新加载”，否则将触发另一个警报“此页面未重新加载”。所以你可以只使用第一个condition@MariaJeysinghAnbu在IE中，即使用户更改了路由，它也会触发刷新警报。在IE中，即使用户更改了路由，它的值为1，但在chrome中，它的工作方式不同最初我发现这种方法很有用，但后来我发现它为我制造了一个bug，所以现在我要做的是在我的componentDidMount的一个redux还原程序中存储一个名为currentPage的字符串prop，但在设置它之前检查它的值，以确保前一个页面是不同的页面，而不是简单的重新加载。时间会告诉我这是否是一个好方法，我如何在react.js类组件中使用此代码？@Mayur Vaghasiya，您可以为类组件使用
componentDidMount
和
componentDidUnmount
函数。我的useEffect上的一个用于
componentDidMount
，我的useEffect返回的一个用于
componentDidUnmount
。我会在有时间的时候编辑我的答案。有没有办法修改重新加载后出现的提示中的消息？
useEffect(() => {
    window.onbeforeunload = function() {
        return true;
    };

    return () => {
        window.onbeforeunload = null;
    };
}, []);

componentDidMount(){
    window.onbeforeunload = function() {
        return true;
    };
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

useEffect(() => {
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }

    return () => {
        window.onbeforeunload = null;
    };
}, [condition]);

componentDidMount(){
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }
}

componentDidUnmount(){
    window.onbeforeunload = null;
}