基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

下面是关于“基于JavaScript判断浏览器到底是关闭还是刷新”这个问题的完整攻略。

什么是关闭和刷新

在开始之前，我们先来明确一下关闭和刷新的概念。

关闭

关闭表示完全关闭浏览器窗口，包括所有的标签页和窗口。

刷新

刷新表示重新加载当前打开的页面。它可以通过浏览器的菜单、快捷键或者页面上的按钮来触发。

如何判断

我们可以使用JavaScript来判断浏览器是关闭还是刷新。在开始之前，我们先来了解一些相关的知识。

beforeunload

beforeunload事件在页面即将被卸载之前触发。这里的“页面即将被卸载”指的是关闭页面或者刷新页面。我们可以在这个事件中编写代码来判断浏览器的行为。

sessionStorage

sessionStorage是一个在浏览器中存储键值对的对象。它类似于JavaScript中的对象，但是它仅在页面会话期间有效，在页面重新加载或关闭之后会被删除。

window.performance

window.performance是一个浏览器性能API，它提供了一些测量浏览器性能的方法。其中，performance.navigation.type用于判断浏览器的行为。

接下来，我们将使用上述知识来判断浏览器是关闭还是刷新。

示例1

下面是一个基本的示例，演示了如何使用beforeunload事件和sessionStorage来判断浏览器的行为。

window.addEventListener('beforeunload', function(event) {
  // 判断是否要离开页面
  if (!sessionStorage.getItem('closing')) {
    // 在这里编写“刷新”时的代码
    console.log('浏览器正在刷新');
  } else {
    // 在这里编写“关闭”时的代码
    console.log('浏览器正在关闭');
  }
});

window.addEventListener('unload', function(event) {
  // 将sessionStorage值设置为true，表示页面正在关闭
  sessionStorage.setItem('closing', true);
});

在这个示例中，我们首先使用addEventListener方法绑定了beforeunload和unload事件。在beforeunload事件中，我们首先使用getItem方法检查sessionStorage中是否存在closing键。如果不存在，则说明浏览器是在刷新页面，我们可以在这里编写相应的代码。如果存在，则说明浏览器正在关闭，我们可以在这里编写相应的代码。

在unload事件中，我们使用setItem方法将sessionStorage中的closing键的值设置为true，表示页面正在关闭。

示例2

下面是另一个示例，演示了如何使用window.performance来判断浏览器的行为。

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_RELOAD) {
  // 在这里编写“刷新”时的代码
  console.log('浏览器正在刷新');
} else if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
  // 在这里编写“后退”时的代码
  console.log('浏览器正在后退');
} else {
  // 在这里编写“关闭”时的代码
  console.log('浏览器正在关闭');
}

在这个示例中，我们首先使用window.performance.navigation.type属性来判断浏览器的行为。TYPE_RELOAD表示浏览器正在刷新页面，TYPE_BACK_FORWARD表示浏览器正在后退，其他情况则说明浏览器正在关闭。

总结

以上就是判断浏览器是关闭还是刷新的完整攻略。我们可以使用beforeunload事件、sessionStorage和window.performance来实现判断。通过这些方法，我们可以针对不同的浏览器行为，编写相应的代码来实现我们的需求。