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

Question

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

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

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

重要的！

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

1. 用户正在访问 page1。
2. 在第 1 页时 - 他单击指向第 2 页的链接。
3. 他被重定向到 page2
4. 现在（重要部分！）他点击浏览器中的后退按钮，因为他想 go 回到第 1 页
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 标头，以仅缓存那些需要缓存的资源。 您还可以强制重新加载以指示浏览器忽略 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

因此，要查看页面是否是使用 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/类型

Answer 3

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

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

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

Answer 4

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

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

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

Answer 6

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

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 7

您应该使用隐藏输入作为刷新指示器，其值为“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 代码将触发刷新。

Answer 8

我尝试了以前答案中的所有解决方案。 没有人工作。

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

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

Answer 9

适用于大多数浏览器的 JS 解决方案

此页面上的许多其他方法都不适用于我，可能是因为“bfcache”正在阻止用户导航回页面时发生任何事情。 但是，我发现在大多数浏览器中注册一个window.onbeforeunload处理程序对我有用，我相信它可以工作，因为它隐式地使 "bfcache" 无效。 这是代码：

window.onbeforeunload = function() {
  window.location.reload(true);
}

除了“返回”按钮导航之外，此事件可能会在其他情况下触发，但我的情况并不重要。 我于 2021 年 8 月在以下平台上对所列浏览器的最新版本进行了测试：

• Linux：适用于 Chrome 和 Firefox。
• Android：适用于 Chrome、Firefox 和 Opera。
• OS X：适用于 Chrome 和 Safari。
• iOS：在 Safari中不起作用。

就我而言，我并不真正关心移动设备。 我确实关心 IE，但无法访问 IE，所以我无法对其进行测试。 如果有人在 IE 上尝试此操作，并且可以在评论中报告结果，那将很有帮助。

修复 iOS Safari 的服务器端响应标头

我发现如果我使用Cache-Control response header使浏览器缓存无效，iOS Safari 也可以工作。 即发送

Cache-Control: no-store, must-revalidate

修复 iOS Safari。 有关如何在各种平台上设置Cache-Control响应标头的信息，请参阅此 SO 答案。

Answer 10

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

location.reload(true);

检测回来是：

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

Answer 11

我遇到了同样的问题，后退按钮会更新位置字段中显示的 url，但页面内容没有改变。

正如其他人所指出的，可以通过捕获“pageshow”事件来检测 document.location 的变化是否是由后退按钮或其他原因引起的。

但我的问题是，当我单击后退按钮时，“pageshow”根本没有触发。 唯一发生的事情是位置字段中的 url 发生了变化（就像它应该发生的那样），但页面内容没有改变。 为什么？

我找到了理解是什么原因的关键： https ://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event。

它说'pageshow' - 事件是由“从同一窗口或选项卡中的另一个页面导航到页面”或“使用浏览器的前进或后退按钮返回页面”引起的

这让我问：“我真的要回到页面吗？”。 “什么标识页面？”。 如果我的后退按钮不是“返回页面”，那么当然“显示页面”根本不会触发。 那么我真的是“回到一个页面”吗？ 还是我可能一直停留在同一个“页面”上？ 什么是“页面”？ 如何识别页面？ 通过网址？

原来我点击后退按钮并没有“更改页面”。 它只是改变了我网址中的 HASH（# + 的东西）。 当 URL 中唯一改变的是哈希值时，似乎浏览器不会将其视为不同的页面。

所以我修改了在点击我的按钮时操纵我的网址的代码。 除了更改散列之外，我还添加了一个查询参数，我为其提供了与散列相同的值，但没有“#”。 所以我的新网址看起来像：

/someUrl?id=something#something

我的应用程序认为是“不同页面”的每个页面现在都有不同的查询字符串参数“id”值。 就浏览器而言，它们是不同的“页面”。 这解决了问题。 'Pageshow' - 事件开始触发和后退按钮工作。

Answer 12

这适用于 11 月 21 日最新的 Firefox 和 Chrome。

    window.addEventListener( "pageshow", function ( event ) {
     var perfEntries = performance.getEntriesByType("navigation");
     if (perfEntries[0].type === "back_forward") {
       location.reload();
     }
    });

Answer 13

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

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

Answer 14

在 Chrome 96 中 perfEntries[0].type 是“重新加载”，当您使用后退按钮时

Answer 15

方法 PerformanceNavigationTiming.type 与代码：

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

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

只工作一两次。 在 Chrome 上，如果我向第 1 页收费（第一次），更改页面（通过链接），重新打开第 1 页（通过链接）（第二次），然后我尝试使用后退按钮回溯，第 1 页（第一次）并不总是重新加载。

有任何想法吗 ？ 谢谢你。

Answer 16

这是一个检测 Safari 的版本，如果检测到，则执行正式弃用的旧代码（但仍在 Safari 中）。

let isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;

if(isSafari) {
    window.addEventListener( "pageshow", function ( event ) {
        let historyTraversal = event.persisted || 
                            ( typeof window.performance != "undefined" && 
                                window.performance.navigation.type === 2 );
        if (historyTraversal) {
        // Handle page restore.
        window.location.reload();
        }
    });
} else {
    let perfEntries = performance.getEntriesByType("navigation")
    if (perfEntries[0].type === "back_forward") {
        window.location.reload(true);
    }
}

Answer 17

我找到了最好的答案，它对我来说非常有用

只需在您的链接中使用这个简单的脚本

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

或按钮点击事件

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

当你使用它时，你首先刷新你的页面然后转到下一页，当你返回时它将具有最后刷新的状态。

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

从这里找到的详细信息

Answer 18

最好的方法是使用jquery设置超时。

function explode(){
  alert("YOUR RELOAD PAGE HERE!");
}
setTimeout(explode, 1);

在一毫秒内它将​​触发一次功能，因此您的用户甚至可能不会注意到它的触发。

我用它没问题。