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

Question

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

如何通过 jquery 检测这种行为？

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

重要！

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

1. 用户正在访问page1。
2. 在第 1 页上 - 他单击指向第 2 页的链接。
3. 他被重定向到第2页
4. 现在（重要的部分！）他点击浏览器中的后退按钮，因为他想返回第 1 页
5. 他又回到了第 1 页 - 现在第 1 页正在重新加载，并且出现类似“你回来了！”这样的警报。

Answer 1

您应该使用隐藏输入作为刷新指示器，其值为“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');
});

当您单击返回按钮时，隐藏字段中的值将保持与您最初离开页面时相同的值。

因此，当您第一次加载页面时，输入的值为“否”。当您返回页面时，它会显示“是”并且您的 JavaScript 代码将触发刷新。

Answer 2

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

location.reload(true);

检测回来是：

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

Answer 3

您可以使用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 )。但我认为这不是最好的解决方案。

更多信息请查看：

• Working with BFCacheMDN 上的文章
• 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?问题

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

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

你可以检查一下

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

---

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

Answer 6

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

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

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

或按钮点击事件

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

当你使用这个时，你先刷新你的页面，然后转到下一页， 当您返回时，它将处于上次刷新的状态。

我在 CAS 登录中使用了它，并给了我想要的东西。 希望对您有所帮助.......

详情来自here

Answer 7

由于performance.navigation 现已弃用，您可以试试这个：

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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

来源见here

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

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

此页面上的许多其他方法都不适合我，可能是因为"bfcache" 正在阻止用户导航回页面时发生任何事情。但是，我发现注册window.onbeforeunload 处理程序在大多数浏览器中都适用于我，我相信它有效，因为它implicitly invalidates the "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 上尝试此操作并且可以在 cmets 中报告结果，那将很有帮助。

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

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

Cache-Control: no-store, must-revalidate

修复 iOS Safari。如何在各种平台上设置Cache-Control响应头，请参见this SO answer。

Answer 13

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

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

Answer 14

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

Answer 15

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

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

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