【从零开始的LeetCode-算法】1456. 定长子串中元音的最大数目-CFANZ编程社区

如何在 JavaScript 事件中区分页面关闭和页面刷新？

往期文章

理解 JavaScript 事件监听的各种类型、使用方法与优化策略

在本文中，我们将使用 beforeunload 事件来监听浏览器页面的关闭与刷新行为，并通过几种不同的方法来区分它们。

使用 `beforeunload` 事件监听页面关闭和刷新

beforeunload 事件是浏览器在用户关闭页面、刷新页面或跳转到另一个页面时触发的事件。你可以通过这个事件来做一些清理工作，或者提示用户保存未保存的内容。最常见的应用场景是在页面关闭或刷新时弹出确认框。

监听 `beforeunload` 事件

window.addEventListener('beforeunload', function (event) {
  // 自定义提示消息
  const message = 'Are you sure you want to leave?';
  event.returnValue = message;  // 对老版本浏览器的支持
  return message;  // 对现代浏览器的支持
});

说明：

当用户试图离开当前页面时（包括刷新或关闭页面），浏览器会显示一个确认框，询问用户是否确定离开。
event.returnValue 或者直接 return 提示消息都会触发浏览器的默认行为，弹出提示框。

注意：

现代浏览器对这个事件的支持有所限制，特别是在弹出框的内容上。为了防止恶意行为，浏览器可能只显示默认的提示文本。
beforeunload 事件会在页面刷新和关闭时都被触发，因此无法直接区分这两者。

如何区分页面刷新与页面关闭

虽然 beforeunload 事件能够监听页面的关闭与刷新，但它不能直接告诉你是页面被刷新还是被关闭。为了实现这一点，我们需要使用一些额外的技巧。以下是两种常用的方法：

方法 1：使用 `sessionStorage` 来区分刷新和关闭

如何利用 sessionStorage 判断页面是否是刷新？

初次加载：当页面第一次加载时，sessionStorage 是空的。
刷新页面：当页面被刷新时，sessionStorage 会保留在当前会话中，但它的内容不会被清空，直到页面被关闭。
关闭页面：当页面关闭时，sessionStorage 会被清空。

因此，我们可以通过在页面加载时设置一个标识符来检测是否是页面刷新。

实现代码：

window.addEventListener('beforeunload', function (event) {
  if (!sessionStorage.getItem('refreshed')) {
    // 页面没有刷新，表示是关闭
    console.log('The page is being closed.');
  } else {
    // 页面被刷新
    console.log('The page is being refreshed.');
  }
});

// 页面所有资源加载完毕时设置标记
window.addEventListener('load', function () {
  sessionStorage.setItem('refreshed', 'true');
});

解释：

当页面加载时，我们将 sessionStorage 中的 refreshed 标记设置为 true，表示页面已经刷新过。
当 beforeunload 事件触发时，我们检查 sessionStorage 中的标记。如果没有该标记，说明页面正在关闭；如果有该标记，说明页面刚刚被刷新。

方法 2：使用 `performance.navigation` 判断页面刷新

浏览器的 performance.navigation 接口可以帮助我们判断页面是通过刷新加载的，还是通过点击链接或其他方式加载的。

实现代码：

window.addEventListener('beforeunload', function (event) {
  if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    // 页面被刷新
    console.log('The page is being refreshed.');
  } else {
    // 页面正在关闭
    console.log('The page is being closed.');
  }
});

解释：

```
performance.navigation.type
```
返回一个数字，表示页面的加载类型：
- 0（TYPE_NAVIGATE）：正常的页面加载（例如通过链接跳转）。
- 1（TYPE_RELOAD）：页面刷新。
- 2（TYPE_BACK_FORWARD）：通过浏览器的前进或后退按钮加载页面。
通过检查这个值，我们可以判断当前页面是刷新还是关闭。