判断当前界面是否是通过用户点击浏览器后退按钮加载的

判断当前界面是否是通过用户点击浏览器后退按钮加载的，主要依赖于浏览器提供的API和事件。目前主要有以下几种方式：

1. 使用 performance.navigation.type (推荐，较准确)

这是相对最可靠和直接的方式。performance.navigation 对象提供了关于页面如何导航的信息，其中 type 属性可以指示导航的类型。

0 (TYPE_NAVIGATE): 用户通过点击链接、输入地址、书签等方式导航到该页面。
1 (TYPE_RELOAD): 用户通过点击刷新按钮或使用 F5 键刷新页面。
2 (TYPE_BACK_FORWARD): 用户通过点击浏览器的前进或后退按钮导航到该页面。
255 (TYPE_RESERVED): 其他类型。

HTML 代码示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>判断后退加载</title>
</head>
<body>
  <h1>当前页面</h1>
  <p id="navigationType"></p>

  <script>
    const navigationTypeElement = document.getElementById('navigationType');
    const navigationType = performance.navigation.type;

    if (navigationType === PerformanceNavigation.TYPE_BACK_FORWARD) {
      navigationTypeElement.textContent = '页面通过浏览器后退/前进按钮加载。';
      console.log('页面通过浏览器后退/前进按钮加载。');
      // 执行后退加载时的特定操作
    } else if (navigationType === PerformanceNavigation.TYPE_RELOAD) {
      navigationTypeElement.textContent = '页面通过刷新加载。';
      console.log('页面通过刷新加载。');
    } else if (navigationType === PerformanceNavigation.TYPE_NAVIGATE) {
      navigationTypeElement.textContent = '页面通过正常导航加载。';
      console.log('页面通过正常导航加载。');
    } else {
      navigationTypeElement.textContent = '未知加载方式。';
      console.log('未知加载方式。');
    }
  </script>
</body>
</html>

注意事项：

PerformanceNavigation 对象及其常量 (例如 PerformanceNavigation.TYPE_BACK_FORWARD) 在较新版本的浏览器中支持良好。
如果你的目标浏览器需要兼容较老的版本，可能需要检查 performance.navigation 是否存在。

2. 使用 pageshow 事件和 event.persisted 属性

pageshow 事件在页面显示时触发，包括初次加载和从浏览器缓存中加载（例如通过后退/前进按钮）。 event.persisted 属性指示页面是否是从浏览器的持久化缓存中加载的。

HTML 代码示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>判断后退加载</title>
</head>
<body>
  <h1>当前页面</h1>
  <p id="pageshowInfo"></p>

  <script>
    const pageshowInfoElement = document.getElementById('pageshowInfo');

    window.addEventListener('pageshow', function(event) {
      if (event.persisted) {
        pageshowInfoElement.textContent = '页面通过浏览器后退/前进按钮从缓存加载。';
        console.log('页面通过浏览器后退/前进按钮从缓存加载。');
        // 执行后退加载时的特定操作
      } else {
        pageshowInfoElement.textContent = '页面首次加载或刷新加载。';
        console.log('页面首次加载或刷新加载。');
      }
    });
  </script>
</body>
</html>

注意事项：

pageshow 事件会在页面首次加载时也会触发，但此时 event.persisted 为 false。
这种方式依赖于浏览器的缓存机制，因此只有当页面是从缓存中加载时才能判断为后退加载。

3. 结合 sessionStorage 或 localStorage (间接方式)

这种方式不是直接判断，而是通过在离开页面时设置一个标记，然后在返回时检查这个标记是否存在。

步骤：

在离开前一个页面时设置标记： 在前一个页面的 unload 或 beforeunload 事件中设置 sessionStorage 或 localStorage 的一个键值。
在当前页面加载时检查标记： 在当前页面的加载时检查该标记是否存在。

HTML 代码示例 (结合 sessionStorage)：

前一个页面 (previous.html):

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>前一个页面</title>
</head>
<body>
  <h1>前一个页面</h1>
  <a href="current.html">去往当前页面</a>

  <script>
    window.addEventListener('beforeunload', function() {
      sessionStorage.setItem('isBackNavigation', 'true');
    });
  </script>
</body>
</html>

当前页面 (current.html):

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>判断后退加载</title>
</head>
<body>
  <h1>当前页面</h1>
  <p id="storageInfo"></p>

  <script>
    const storageInfoElement = document.getElementById('storageInfo');
    if (sessionStorage.getItem('isBackNavigation')) {
      storageInfoElement.textContent = '页面可能是通过浏览器后退按钮加载。';
      console.log('页面可能是通过浏览器后退按钮加载。');
      sessionStorage.removeItem('isBackNavigation'); // 清除标记
      // 执行后退加载时的特定操作
    } else {
      storageInfoElement.textContent = '页面可能是正常加载。';
      console.log('页面可能是正常加载。');
    }
  </script>
</body>
</html>

注意事项：

这种方式的可靠性取决于 unload 或 beforeunload 事件是否能正常触发。在某些情况下，特别是用户直接关闭标签页或浏览器时，这些事件可能不会触发。
需要修改前一个页面的代码，这可能不是总是可行的。
这种方式更像是判断用户是否"刚刚"从某个特定的页面返回，而不是严格意义上的浏览器后退按钮。

4. document.referrer (不太可靠)

document.referrer 属性返回的是用户导航到当前页面之前所在的页面的 URL。理论上，如果通过后退按钮加载，document.referrer 应该存在。

HTML 代码示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>判断后退加载</title>
</head>
<body>
  <h1>当前页面</h1>
  <p id="referrerInfo"></p>

  <script>
    const referrerInfoElement = document.getElementById('referrerInfo');
    if (document.referrer) {
      referrerInfoElement.textContent = `referrer: ${document.referrer}`;
      console.log(`referrer: ${document.referrer}`);
      // 可能是后退加载，但不能完全确定
    } else {
      referrerInfoElement.textContent = '没有 referrer 信息。';
      console.log('没有 referrer 信息。');
      // 可能是首次加载、刷新、或用户直接输入地址
    }
  </script>
</body>
</html>

注意事项：

非常不可靠。 document.referrer 在很多情况下为空：
- 用户直接在地址栏输入 URL。
- 用户点击了书签。
- 通过某些 <a> 标签的 rel="noreferrer" 属性导航。
- 从 HTTPS 页面导航到 HTTP 页面（出于安全原因，referrer 会被移除）。
即使 document.referrer 存在，也不能完全确定是后退加载，因为用户也可以从其他页面点击链接返回。

总结和选择建议：

最推荐：performance.navigation.type 这是最准确和直接的方式来判断是否是通过后退/前进按钮加载的。
备选方案：pageshow 事件和 event.persisted 如果需要处理从缓存加载的情况，可以使用这种方式。
间接方式：结合 sessionStorage 或 localStorage 适用于需要跟踪用户是否从特定页面返回的场景。
不推荐用于判断后退：document.referrer 由于其不可靠性，不适合用来判断是否是后退加载。

在实际应用中，可以根据具体的需求和目标浏览器的兼容性来选择合适的方法。通常，使用 performance.navigation.type 是最简洁和有效的方式。如果需要更精细的控制，或者需要兼容旧浏览器，可以考虑结合使用多种方法。