[英]How to distinguish between refresh (by F5/refresh button) and close browser?
我需要处理浏览器上的事件,如跨浏览器上的返回、刷新和关闭。 问题是我的客户希望每个事件都有不同的逻辑。 对于后退按钮,这个解决方案非常好:
但是现在很难区分刷新和关闭,我发现的所有解决方案都是关于使用“beforeunload”事件:
对于 F5 刷新,我可以在键盘上捕捉事件,但是当用户在浏览器上按下刷新按钮时,我不能。 如果我使用“beforeunload”,它与关闭浏览器事件相同。
我还找到了一个解决方法:
但不幸的是,我想要做的是在页面卸载之前显示消息(在浏览器关闭时显示而不是在刷新时显示)
有谁知道它的解决方案(跨浏览器)
谢谢
您可能想使用 Cookies/window.sessionStorage。
您可以设置一个没有明确过期日期的 cookie,以便它仅对当前会话可用(在用户关闭浏览器窗口之前有效)。
你也可以使用 sessionStorage 对象,它只存储一个会话的数据。 当用户关闭特定浏览器选项卡时,数据将被删除。
你可以按照这个方法:
1.在用户第一次访问页面时创建一个cookie document.cookie = "userloggedin=true";
或设置sessionStorage.userLoggedIn = true;
2. 刷新/关闭并重新打开选项卡后,cookie 将可用,如果 cookie 不存在则表示用户关闭窗口并重新打开它。
同样的 sessionStorage 数据会在用户关闭浏览器标签后被删除
希望这有帮助!
tabOrBrowserStillAliveInterval;
constructor() {
// do some action if the browser or last opened tab was closed (in 15sec after closing)
if (this.wasBrowserOrTabClosed()) {
// do some action
}
// every 15sec update browserOrTabActiveTimestamp property with new timestamp
this.setBrowserOrTabActiveTimestamp(new Date());
this.tabOrBrowserStillAliveInterval = setInterval(() => {
this.setBrowserOrTabActiveTimestamp(new Date());
}, 15000);
}
setBrowserOrTabActiveTimestamp(timeStamp: Date) {
localStorage.setItem(
'browserOrTabActiveSessionTimestamp',
`${timeStamp.getTime()}`
);
}
wasBrowserOrTabClosed(): boolean {
const value = localStorage.getItem('browserOrTabActiveSessionTimestamp');
const lastTrackedTimeStampWhenAppWasAlive = value
? new Date(Number(value))
: null;
const currentTimestamp = new Date();
const differenceInSec = moment(currentTimestamp).diff(
moment(lastTrackedTimeStampWhenAppWasAlive),
'seconds'
);
// if difference between current timestamp and last tracked timestamp when app was alive
// is more than 15sec (if user close browser or all opened *your app* tabs more than 15sec ago)
return !!lastTrackedTimeStampWhenAppWasAlive && differenceInSec > 15;
}
工作原理:如果用户关闭浏览器或关闭所有打开的应用程序选项卡,则在 15 秒超时后 - 将触发您期望的操作。
浏览器限制是我们在注销前需要 15 秒超时的原因。 由于浏览器无法区分以下情况:浏览器关闭、选项卡关闭和选项卡刷新。 所有这些操作都被浏览器视为相同的操作。 因此,15 秒超时就像一种解决方法,仅捕获浏览器关闭或关闭所有打开的应用程序选项卡(并跳过刷新/F5)。
您可以使用Browser的performance.navigation
对象来检测页面的导航类型。
var navigationType = performance.navigation.type;
if (navigationType === performance.navigation.TYPE_BACK_FORWARD) {
console.log("Back/Forward button");
} else if (navigationType === performance.navigation.TYPE_RELOAD) {
console.log("Reloaded");
} else if (navigationType === performance.navigation.TYPE_NAVIGATE) {
console.log("Normal navigation");
}
并且onbeforeunload
事件可以照常用于检测浏览器关闭。 请参阅此文档以了解有关导航常量的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.