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

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

如何通过jquery检测此类动作？

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

重要！

有些人可能误会了我想要的东西。我不想刷新当前页面。我想刷新按下后退按钮后加载的页面。这是我更详细的意思：

1. 用户正在访问第1页。
2. 在第1页时-他点击了第2页的链接。
3. 他被重定向到page2
4. 现在（重要的部分！），他单击浏览器中的“后退”按钮，因为他想返回到第1页
5. 他回到了page1上-现在正在重新加载page1，并且出现类似“您回来了！”的警报。

您可以使用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上使用BFCache的文章
• WebKit页面缓存II – Brady Eidson的卸载事件
• MDN上的pageshow事件参考
• Ajax，后退按钮和DOM更新问题
• JavaScript-bfcache / pageshow事件-event.persisted始终设置为false吗？题

自从发布以来已经有一段时间了，但是如果您不需要支持旧的浏览器，我找到了一个更优雅的解决方案。

你可以用

performance.navigation.type

包含浏览器支持的文档在这里：https : //developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

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

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

该2指示页面被导航到历史访问。其他可能性是-

0:通过单击链接，书签，表单提交或脚本，或在地址栏中键入URL，可以访问该页面。

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

255: 任何其他方式

这些详细信息在这里：https : //developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

注Performance.navigation.type现已弃用，取而代之的PerformanceNavigationTiming.type返回“导航” /“重装” /“back_forward” /“预渲染”：https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming /类型

只需使用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); 

没有window.history ...，并确保已定义url。

希望有帮助。

由于performance.navigation现已弃用，您可以尝试以下操作：

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

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

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

<input type="hidden" id="refresh" value="no">

现在使用jQuery，您可以检查其值：

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

当您单击“后退”按钮时，隐藏字段中的值将保留与最初离开页面时相同的值。

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

解决我问题的另一种方法是禁用页面缓存。这使得浏览器可以从服务器获取页面，而不是使用缓存版本：

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

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

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();

看到这里的来源

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

location.reload(true);

而检测回来的是：

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

在您的html头文件中使用以下meta标签，这对我有用。

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

我找到了最佳答案，对我来说效果很好

只需在链接中使用此简单脚本

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

或按钮单击事件

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

使用此功能时，请先刷新页面，然后再转到下一页，返回时页面将处于最后刷新状态。

我在CAS登录名中使用了它，并提供了我想要的东西。希望能帮助到你 .......

从这里找到详细信息