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

本文介绍了如何在使用浏览器后退按钮时强制重新加载页面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I need to somehow detect that the user has pressed a browsers back button and reload the page with refresh (reloading the content and CSS) using jquery.

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

How to detect such action via jquery?

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

Because right now some elements are not reloaded if I use the back button in a browser. But if I use links in the website everything is refreshed and showed correctly.

重要！

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

Some people have probably misunderstood what I want. I don't want to refresh the current page. I want to refresh the page that is loaded after I press the back button. here is what I mean in a more detailed way:

用户正在访问page1。

while在第1页 - 他点击指向第2页的链接。

他被重定向到page2

现在（重要的部分！）他点击了背面浏览器中的按钮，因为他想回到第1页

他回到了第1页 - 现在正在重新加载page1，并发出警告，例如你回来了！

user is visiting page1.
while on page1 - he clicks on a link to page2.
he is redirected to the page2
now (Important part!) he clicks on the back button in browser because he wants to go back to page1
he is back on the page1 - and now the page1 is being reloaded and something is alerted like "You are back!"

推荐答案

您可以使用 pageshow 事件来处理浏览器通过历史记录遍历导航到您的页面时的情况：

You can use pageshow event to handle situation when browser navigates to your page through history traversal:

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）。但我不认为这是最好的解决方案。

Note that HTTP cache may be involved too. You need to set proper cache related HTTP headers on server to cache only those resources that need to be cached. You can also do forced reload to instuct browser to ignore HTTP cache: window.location.reload( true ). But I don't think that it is best solution.

有关更多信息，请查看：

For more information check:

关于MDN的文章

by Brady Eidson

事件参考

问题

问题

Working with BFCache article on MDN
WebKit Page Cache II – The unload Event by Brady Eidson
pageshow event reference on MDN
Ajax, back button and DOM updates question
JavaScript - bfcache/pageshow event - event.persisted always set to false? question

这篇关于如何在使用浏览器后退按钮时强制重新加载页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

page2