Javascript 如何在使用浏览器后退按钮时强制重新加载页面？

我需要以某种方式检测用户是否按下了浏览器后退按钮，并使用jquery通过刷新（重新加载内容和CSS）重新加载页面

如何通过jquery检测此类操作

因为现在如果我在浏览器中使用后退按钮，一些元素不会被重新加载。但如果我在网站上使用链接，所有内容都会被刷新并正确显示

重要

有些人可能误解了我想要什么。我不想刷新当前页面。我想在按下后退按钮后刷新加载的页面。以下是我更详细的意思：

用户正在访问第1页

在第1页，他点击了第2页的链接

他被转到第二页

现在（重要的部分！）他点击浏览器中的后退按钮，因为他想返回到第1页

他又回到了page1，现在page1正在重新加载，出现了类似“你回来了！”

---

您应该使用隐藏输入作为刷新指示器，其值为“否”：

单击“上一步”按钮时，隐藏字段中的值将保留与最初离开页面时相同的值

---

因此，第一次加载页面时，输入值将为“否”。当您返回页面时，将显示“是”，您的JavaScript代码将触发刷新。

重新加载很容易。你应使用：

location.reload(true);

检测背部是：

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

---

当浏览器通过历史遍历导航到您的页面时，您可以使用

pageshow

事件来处理这种情况：

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

请注意，也可能涉及HTTP缓存。您需要在服务器上设置适当的缓存相关HTTP头，以便仅缓存需要缓存的资源。您还可以强制重新加载以指示浏览器忽略HTTP缓存：

window.location.reload（true）

。但我不认为这是最好的解决方案

有关更多信息，请查看：

• 关于MDN的文章
• 布雷迪·艾德森
• MDN上的事件引用
• 问题:
• 问题:

只需使用jquery：

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

当使用ajax单击“后退”或“前进”按钮时，上述操作将100%起作用

如果没有，则脚本的另一部分中肯定存在错误配置

例如，如果使用类似于上一篇文章中的一个示例的内容

window.history.pushState（''，null，'./'），它可能不会重新加载

所以当您使用
history.pushState（）时
确保你正确使用它

建议在大多数情况下，您只需要：

history.pushState(url, '', url); 

没有窗户，历史。。。并确保定义了url

希望这会有所帮助。
这篇文章发布已经有一段时间了，但如果您不需要支持旧浏览器，我发现了一个更优雅的解决方案

你可以和我核对一下

performance.navigation.type

此处提供了包括浏览器支持在内的文档：

因此，要查看页面是否是使用back从历史加载的，您可以执行以下操作

if(performance.navigation.type == 2){
   location.reload(true);
}

2
表示该页面是通过导航到历史记录来访问的。其他可能性包括-

0:
通过以下方式访问页面：链接、书签、表单提交或脚本，或者在地址栏中键入URL

1:
通过单击“重新加载”按钮或通过Location.Reload（）方法访问该页面

255:
任何其他方式

详情如下：


注意：Performance.navigation.type现在被弃用，取而代之的是返回“navigate”/“reload”/“back\u forward”/“prerender”的PerformanceNavigation.type:
我找到了最好的答案，它对我来说非常有效

只需在链接中使用这个简单的脚本

<A HREF="javascript:history.go(0)">next page</A>



或者单击按钮事件

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">



使用此选项时，首先刷新页面，然后转到下一页，
当您返回时，它将具有上次刷新的状态

我在CAS登录中使用了它，并提供了我想要的。
希望对……有帮助

详情可从

由于
performance.navigation
现在已不推荐使用，您可以尝试以下方法：

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

对我来说，解决这个问题的另一种方法是禁用页面的缓存。使浏览器能够从服务器获取页面，而不是使用缓存版本：

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

在html头文件中使用以下元标记，这对我很有用

<meta http-equiv="Pragma" content="no-cache">

当前，如果用户单击后退按钮，这是最新的重新加载页面方式

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

请参阅源代码，我遇到了相同的问题，后退按钮将更新位置字段中显示的url，但页面内容没有更改

正如其他人指出的，通过捕获“pageshow”事件，可以检测document.location中的更改是否是由后退按钮或其他原因引起的

但我的问题是，当我点击后退按钮时，“pageshow”根本没有触发。唯一发生的事情是位置字段中的url发生了更改（就像它应该发生的那样），但页面内容没有更改。为什么?

我找到了理解原因的关键：

它说“pageshow”-事件是由“从同一窗口或选项卡中的另一页导航到该页”或“使用浏览器的前进或后退按钮返回该页”引起的

这让我问：“我真的要回到这一页吗？”。“什么标识页面？”。如果我的后退按钮没有“返回页面”，那么当然不会触发“showpage”。那我真的是“回到一页”了吗？或者我可能一直在同一页上？什么是“页面”？如何识别页面？通过URL

原来我点击后退按钮并没有“改变页面”。它只是更改了我的url中的散列（即#+某物）。当URL的唯一变化是哈希时，浏览器不认为它是不同的页面。

所以我修改了
<meta http-equiv="Pragma" content="no-cache">

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();