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

Question

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

如何通过jquery检测这样的动作？

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

重要!

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

1. 用户正在访问page1.
2. 而在第1页 - 他点击了第2页的链接.
3. 他被重定向到page2
4. 现在(重要的一部分!)他点击浏览器中的后退按钮,因为他想回到page1
5. 他回到了第1页 - 现在正在重新加载page1并且会收到类似"你回来了!"的警告.

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

有关更多信息,请检查

• 在MDN上使用BFCache文章
• WebKit Page Cache II - Brady Eidson 的卸载活动
• MDN上的pageshow事件参考
• Ajax,后退按钮和DOM更新问题
• JavaScript - bfcache/pageshow事件 - event.persisted总是设置为false？题

Answer 2

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

你可以检查一下

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

Answer 3

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

希望有所帮助..

Answer 4

我尝试了之前答案中的所有解决方案。没有一个起作用。

最后我找到了这个解决方案，它确实有效：

(function () {
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
})();

Answer 5

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

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

请参阅此处获取来源

Answer 6

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

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

Answer 7

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

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

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

Answer 8

您应该使用隐藏输入作为刷新指示符,值为"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代码将触发刷新.