Chrome：如何检测历史导航（已按下后退按钮）答案

【问题标题】：Chrome: How to detect history navigation (back button having been pressed)Chrome：如何检测历史导航（已按下后退按钮）
【发布时间】：2023-01-30 06:05:47
【问题描述】：

我知道，这个问题看起来与那些经常被问到和重新被问到的问题非常相似，例如：
How to force reloading a page when using browser back button?

我需要知道用户是否有...
.导航到当前页面，或重新加载当前页面（在这两种情况下页面已正常加载，我不需要进一步的具体操作）
.或已使用历史记录到达当前页面背部或者向前按钮（在这些情况下，页面是不是已加载，无论如何都从浏览器缓存中取出，我需要采取进一步的行动 - 最简单的只是重新加载页面，window.location.reload(); 或等效）。

我尝试了此处公开的解决方案：https://stackoverflow.com/a/43043658/3872061 和此处：https://stackoverflow.com/a/56851042/3872061 以及其他几个地方，无论是否在 Stackoverflow 中。

它适用于 Firefox (105.0.1)、Edge (105.0.1343.50)、但我无法让它与 Chrome (105.0.5195.127) 一起使用。

这是我能想到的最简单的测试。

page1.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(window).on("pageshow", function(e){

      $("#type").text(window.performance.getEntriesByType("navigation")[0].type);
      let historyTraversal = event.persisted
        || ( typeof window.performance != "undefined" && window.performance.getEntriesByType("navigation")[0].type === "back_forward" );
      if ( historyTraversal ) { // Handle page restore.
        $("#backOrNot").text('User just came back using the history "back" button');
        //window.location.reload(); // this is actually the targetted action: reload page
      }
      else {
        $("#backOrNot").text('User loaded the page');
      }

    });
  </script>
</head>
<body>
  <p id="backOrNot"></p>
  <p>( window.performance.getEntriesByType("navigation")[0].type = <span id="type"></span> )</p>
  <p><a href="page2.html">Just a link from where you can click the history back button</a></p>
</body>
</html>

page2.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <p>
    From here, try to:<br>
    1. Navigate to <a href="page1.html">page1.html</a><br>
    2. Go back to page1.html using the history back-button
  </p>
</body>
</html>

使用 FF 和 Edge，当你回到第1页使用历史，“back_forward”信息是可用的。
使用 Chrome，您只需获得页面在初始加载时的状态（“导航”或“重新加载”），就好像您从未导航过然后使用后退按钮返回一样。
我错过了什么？我在这里做错了什么？

【问题讨论】：

这回答了你的问题了吗？ How to Detect Browser Back Button event - Cross Browser
我不在单个页面上下文中，而是在不同的页面上，根据数据库数据的当前状态，在请求 http 时在服务器端构建。不同的 URL，不同的 PHP 脚本，不仅仅是同一页面上的不同#。我仍然会在那里挖掘所有答案，但首先快速阅读它不是同一个问题。
我可以挑战这种需求吗——你为什么需要知道这个？只是确保这不是 XY 问题。
示例：项目列表“itemsList.php”。用户点击一个项目的链接，比方说“我的 Itm”，来查看详细信息。此链接打开“item.php?id=foo”。他在那里做了一些更改（ajax 驱动的形式），例如更正错字，“My Itm” ==> “My Item”。 Ajax 发布将更改保存到数据库中。然后他使用后退按钮回到列表中。由于“返回”，浏览器显示缓存中未修改的列表，而不是从服务器加载“itemsList.php”。仍然是“My Itm”而不是更正后的“My Item”。用户需要按 F5 才能看到他的更改。

标签： javascript google-chrome browser-history

【解决方案1】：

如果您发送页面标题以不允许缓存该 itemsList.php 页面，您的页面将自动重新加载。我的测试代码 -- see answer here -- 应该可以帮助您理解这个概念。我仍在努力寻找一种更好的方法来以不同的方式解决该问题。就我而言，如果按下后退按钮（返回一页），我将启动一个“页面正在加载微调器”，该微调器不会将自身重置为隐藏状态。

【讨论】：