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

Question

我需要以某种方式检测用户按下了浏览器的后退按钮并使用 jquery 重新加载页面(重新加载内容和 CSS)。

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

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

重要!

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

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

Answer 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 header 以仅缓存那些需要缓存的资源。您还可以强制重新加载以指示浏览器忽略 HTTP 缓存:window.location.reload( true )。但我认为这不是最佳解决方案。

更多信息请查看:

• Working with BFCache MDN 上的文章
• WebKit Page Cache II – The unload Event通过布雷迪·艾德森
• pageshow MDN 上的事件引用
• Ajax, back button and DOM updates问题
• JavaScript - bfcache/pageshow event - event.persisted always set to false?问题
• Back/Forward Cache