我正在使用React js。我需要检测page refresh. 当用户点击刷新图标或按 F5 时，我需要找出事件。
我通过使用 javascript 函数尝试了stackoverflow 帖子
我使用 javascript 函数beforeunload仍然没有运气。
onUnload(event) {
alert('page Refreshed')
}
componentDidMount() {
window.addEventListener("beforeunload", this.onUnload)
}
componentWillUnmount() {
window.removeEventListener("beforeunload", this.onUnload)
}
这里我有关于stackblitz 的完整代码
把它放在构造函数中：
if (window.performance) {
if (performance.navigation.type == 1) {
alert( "This page is reloaded" );
} else {
alert( "This page is not reloaded");
}
}
它将起作用，请在stackblitz上查看此示例。
如果您正在使用 React Hook、UseEffect，您可以将以下更改放入您的组件中。它对我有用
useEffect(() => {
window.addEventListener("beforeunload", alertUser);
return () => {
window.removeEventListener("beforeunload", alertUser);
};
}, []);
const alertUser = (e) => {
e.preventDefault();
e.returnValue = "";
};
您的代码似乎工作得很好，您的警报将不起作用，因为您没有停止刷新。如果您console.log('hello')显示输出。
更新 - -
这应该会阻止用户刷新，但这取决于您想要发生的情况。
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
不幸的是，由于 performance.navigation.type 已被弃用，目前接受的答案不能被视为可以接受
最新的 API 是实验性的 ATM。作为一种解决方法，我只能建议在 redux（或您使用的任何东西）存储中保存一些值以指示重新加载后的状态，并在第一次路由更改时更新它以指示路由不是因为刷新而更改。
它实际上非常简单，每当您重新加载页面时，这都会添加默认警报。
useEffect(() => {
window.onbeforeunload = function() {
return true;
};
return () => {
window.onbeforeunload = null;
};
}, []);
componentDidMount(){
window.onbeforeunload = function() {
return true;
};
}
componentDidUnmount(){
window.onbeforeunload = null;
}
您可以将验证设置为仅在条件为 时添加警报true。
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;
}