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

Question

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

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

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

重要！

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

1. 用户正在访问第1页。
2. 而在第1页-他点击到第2页的链接。
3. 他被重定向到第2页
4. 现在（重要部分！）他点击浏览器中的后退按钮，因为他想回到第1页
5. 他又回到了第1页——现在第1页正在重新加载，有些东西被提醒说“你回来了！”

Answer 1

只需使用jQuery：

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

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

});

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

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

例如，如果在窗口中使用类似于上一篇文章中的一个示例的内容，它可能不会重新加载。历史pushState（“”，null，./”）

因此，当您使用历史记录时。pushState（） 确保正确使用它。

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

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

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

希望对你有帮助。。

Answer 2

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

你可以和我核对一下

performance.navigation.type

此处提供了包括浏览器支持在内的文档：https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

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

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

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

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

1：通过单击Reload按钮或通过Location.reload（）方法访问页面。

255：任何其他方式

这里有详细说明：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

注意性能。航行类型现在已被弃用，取而代之的是PerformanceNavigationTiming。返回“导航”/“重新加载”/“后退”/“预渲染”的类型：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type

Answer 3

您可以使用page eshow事件来处理浏览器通过历史遍历导航到您的页面时的情况：

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缓存：窗口。地方重新加载（真）。但我不认为这是最好的解决方案。

有关更多信息，请查看：

• 使用关于MDN的BFCache文章
• WebKit页面缓存II–Brady Eidson的卸载事件
• pageshow MDN上的事件参考
• Ajax、后退按钮和DOM更新问题
• JavaScript-bfcache/pageshow事件-event。是否始终设置为false？问题: