Question

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

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

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

重要！

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

用户正在访问page1。
在第1页上 - 他点击指向第2页的链接。
他被重定向到page2
现在（重要的部分！）他点击了浏览器中的后退按钮，因为他想回到第1页
他回到了第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 )。但我不认为这是最好的解决方案。

有关详细信息，请查看：

Working with BFCache关于MDN的文章
WebKit Page Cache II – The unload Event
pageshow事件参考
Ajax, back button and DOM updates问题
JavaScript - bfcache/pageshow event - event.persisted always set to 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

您应该使用隐藏输入作为刷新指示符，值为＆＃34;否＆＃34;：

<input type="hidden" id="refresh" value="no">

现在使用jQuery，您可以检查其值：

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

单击后退按钮时，隐藏字段中的值保留与最初离开页面时相同的值。

因此，当您第一次加载页面时，输入的值将为＆＃34; no＆＃34;。当你返回页面时，它会是＆＃34;是＆＃34;并且您的JavaScript代码将触发刷新。

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

请参阅here作为源文件

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

location.reload(true);

检测回来是：

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

Answer 9

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

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

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

或按钮点击事件

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

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

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

从here
找到的详细信息

Answer 10

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

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

Answer 11

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

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

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

我从https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event找到了理解导致这种情况的关键。

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

这让我问：“我真的回到了页面吗？”。 “什么标识页面？”。如果我的后退按钮做了其他事情而不是“返回到页面”，那么当然 'showpage' 根本不会触发。那么我真的是“返回页面”吗？或者我可能一直停留在同一个“页面”上？什么是“页面”？如何识别页面？通过网址？

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

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

/someUrl?id=something#something

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

Answer 12

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

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

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

我使用它没问题。

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

12 个答案: