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

javascript jquery browser browser-cache page-refresh

2022-08-30 03:03:58

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

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

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

重要！

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

用户正在访问页面 1。
在第1页上 - 他点击了指向第2页的链接。
他被重定向到页面2
现在（重要部分！）他点击浏览器中的后退按钮，因为他想回到第1页
他又回到了第1页 - 现在第1页正在重新加载，并且有些东西被提醒，比如“你回来了！

答案 1

您可以使用事件来处理浏览器通过历史记录遍历导航到您的页面时的情况：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 标头，以仅缓存需要缓存的资源。您也可以强制重新加载到 instuct 浏览器以忽略 HTTP 缓存：。但我不认为这是最好的解决方案。window.location.reload( true )

有关更多信息，请查看：

使用 BFCache 关于 MDN 的文章
WebKit Page Cache II – The unload Event by Brady Eidson
页面在MDN上显示事件参考
Ajax，后退按钮和DOM更新问题
JavaScript - bfcache/pageshow event - event.persisted 总是设置为 false？问题
后退/前向缓存

答案 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:通过单击“重新加载”按钮或通过 Location.reload（）方法访问该页面。

255:任何其他方式

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

注意 Performance.navigation.type 现在已弃用，取而代之的是 PerformanceNavigationTiming.type，它返回 “navigate” / 'reload' / 'back_forward' / 'prerender'： https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type