jquery - How can I detect back navigation on the client in javascript? - Stack Overflow

admin管理员组

文章数量:1187336

Please Note: I am not trying to detect that the back button was clicked. I don't care about that.

I just want to know that they page was loaded on a back navigation. I want to display a warning to my user in one place of my application if they click the back button advising them to refresh.

Edits:

1) I do want my pages to cache. We live in a mobile world now. Not caching is a bad practice.

2) I would like this feature to be URL agnostic. Decoupling is good practice.

Please Note: I am not trying to detect that the back button was clicked. I don't care about that.

I just want to know that they page was loaded on a back navigation. I want to display a warning to my user in one place of my application if they click the back button advising them to refresh.

Edits:

1) I do want my pages to cache. We live in a mobile world now. Not caching is a bad practice.

2) I would like this feature to be URL agnostic. Decoupling is good practice.

• javascript
• jquery

Share Improve this question Follow edited Mar 18, 2015 at 15:36 Jordan asked Mar 18, 2015 at 15:11 JordanJordan 9,9011111 gold badges7676 silver badges144144 bronze badges 6

• If you know the URL of the page they would have clicked back from, you could check the value of document.referer. Otherwise I don't know that this is possible. There is a window.history element but I don't think there's any way to tell if the current state is the last one in the history or not. – Hayden Schiff Commented Mar 18, 2015 at 15:21
• Have a look at window.onpopstate, I think that is as close as you can get to a behaviour like the one you are describing – Danilo Commented Mar 18, 2015 at 15:27
• I would rather have something that is decoupled from the URLs. – Jordan Commented Mar 18, 2015 at 15:31
• You should look on js history libraries, that allow you to save states and handle forward/back navigation – Hacketo Commented Mar 18, 2015 at 15:39
• Is there a forward stack in the history API? – Jordan Commented Mar 18, 2015 at 15:50

 |  Show 1 more comment

9 Answers 9

Sorted by: Reset to default 6 +50

<script>
if (history.state !== null  &&  +history.state < history.length)
{
    alert("refresh needed");
    history.replaceState(null, "", window.location.href);
}
else
{
    history.replaceState(history.length, "", window.location.href);
}
</script>

The first time the page loads, this stores the current length of the history (which is also the page's position in the history) into the history itself, without changing the browser's location or otherwise modifying the history. On a revisit, it checks whether that position is at the end of the history - if not, there's been some back-navigation. It then alerts and clears the stored position.

Pros:

• Does not trigger alert on refresh.

• Does not trigger alert if page is visited again later, either in the same tab or a different one.

Cons:

• Cannot distinguish between forward-navigation and back-navigation. I.e., if the user goes back further than this page and then navigates forward to it, it will still alert, because some back-navigation was used to get here. However, I would think that even in this situation, you would want the user to refresh.

• Only alerts once. If the user then goes forward and back again, it won't alert again. Since the user has already been notified, perhaps this is not important.

Here is a simple method. It will detect the page was loaded from both back and forward navigation though.

if(window.performance.navigation.type === 2) {
   // the page was navigated to via the forward or back button
   // refresh
}

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

@jQuery.PHP.Magento.com beat me to it, but you can use localStorage without needing to track particular URLs:

<script>
window.onbeforeunload = function()
{
    localStorage.setItem("beenHere", true);
}

if (localStorage.getItem("beenHere"))
{
    alert("Please refresh");
    localStorage.removeItem("beenHere");
}
</script>

"beenHere" would need to be a different string for different pages, but can be symbolic, not a precise URL.

EDIT: Wait, noticed a problem: this will alert when you refresh. Will have to think about it more.

Use following:

On 2nd page only use :

localStorage.setItem("urlnow", document.URL);

On 1st page check

if(localStorage.getItem("urlnow") == Your_URL_OF_Next_Page)){
 window.location.reload()
}

There is no such method to check Next page url.Just you can have document.referrer which is not useful in your case, so you need to hardcode Next page url to check if the localstorage variable was set. Means the user went on that page. You can destroy localstorage too as per your requirement.

Edit : Better way

On 2nd page use :

$(document).ready(function(){

    localStorage.setItem("nextPageHit",1));

})

On 1st page

$(document).ready(function(){

    if(localStorage.getItem("nextPageHit")){
         window.location.reload();//Forcible reload.

        localStorage.setItem("nextPageHit",0);
    }

})

You need to say the browser not to save the cache of this page by setting the response headers.
Using Ruby on Rails:

response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' # HTTP 1.1.  
response.headers['Pragma'] = 'no-cache' # HTTP 1.0.  
response.headers['Expires'] = '0' # Proxies.  

It might be better to not cache the pages so the user doesn't need a refresh. Adding the following tag in your disables caching of the page.

<meta http-equiv="Cache-Control" content="no-store" /> 

This code below will work for detecting if the page shown is loaded from cache instead of from the server, for instance if it was from forward/backwards navigation since that's what I needed in my application.

document.getElementsByTagName("BODY")[0].onpageshow = function() {
    if (event.persisted) {
        alert('Please refresh');
        //your code here for what to do if page gets displayed from cache
    }
};

The onpageshow event happens whenever the page is displayed, so it works just fine with navigation. event.persisted is a read-only property indicating if the webpage is loading from a cache. This ended up as the perfect solution for me when I was looking to do something similar.

**maybe this way,and I also added if the user from index.html to nex.html, and in nex.html the user added url # , **

var kembali = -1;
var kembali2;
var kembali3 = "";

window.addEventListener('popstate',function(event) {
  kembali--;
  if (kembali2 != "") {
    if (kembali2 == window.history.length) {
      kembali3 = "ya";
    }
  }
  kembali2 = window.history.length;
});
setInterval(function() {
  if(kembali3 == "ya") {
    window.history.back();
  }
},100);

If you want to use the click back event, use this code

history.go(kembali);

if (performance.getEntriesByType('navigation')[0].type === 'back_forward') {

}

本文标签： jqueryHow can I detect back navigation on the client in javascriptStack Overflow