Question

我要求在浏览器上处理事件，例如回传，刷新和关闭浏览器。问题是我的客户希望每个事件都有不同的逻辑。对于后退按钮，这个解决方案非常好：

https://stackoverflow.com/a/36786695/3462243

但现在很难区分刷新和关闭，我找到的所有解决方案都是关于使用“beforeunload”事件：

为了通过F5刷新，我可以在键盘上捕捉事件，但是当用户按下浏览器上的刷新按钮时，我不能。如果我使用“beforeunload”，则关闭浏览器事件也是如此。

我还找到了一种解决方案：

但不幸的是，我想要做的是在页面卸载之前显示消息（当浏览器关闭时显示但在刷新时不显示）

有没有人知道它的解决方案（跨浏览器）

由于

Answer 1

您可能想要使用Cookies / window.sessionStorage。

您可以设置一个没有明确到期日期的cookie，以便它仅适用于当前会话（在用户关闭浏览器窗口之前有效）。
您还可以使用sessionStorage对象，它仅存储一个会话的数据。当用户关闭特定浏览器选项卡时，将删除数据。

您可以按照以下方式：
1.当用户首次访问网页document.cookie = "userloggedin=true";或设置sessionStorage.userLoggedIn = true;

时创建Cookie

2.Cookie将在刷新/关闭和重新打开选项卡后可用，如果cookie不存在则表示用户关闭窗口并重新打开它。
同样，在用户关闭浏览器选项卡

后，将删除sessionStorage数据

希望这有帮助！

Answer 2

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 秒超时后 - 将触发您期望的操作。

它适用于打开多个窗口
没有额外的服务器负载
F5 / 刷新没问题

浏览器限制是我们在注销前需要 15 秒超时的原因。由于浏览器无法区分以下情况：浏览器关闭、选项卡关闭和选项卡刷新。所有这些操作都被浏览器视为相同的操作。因此，15 秒超时就像一种解决方法，仅捕获浏览器关闭或关闭所有打开的您的应用 选项卡（并跳过刷新/F5）。

Answer 3

您可以使用浏览器的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事件来检测浏览器关闭。请参阅this documentation以了解有关导航常量的更多信息。

如何区分刷新（通过F5 /刷新按钮）和关闭浏览器？

3 个答案: