向后浏览器后退按钮

Question

Below is the web page flow

OTHER pages ... > START page > TEAM page > PERSON page

When the user reach the PERSON page , how can I make the user to go back to the START page instead of going back to the TEAM page when the browser back button is pressed?

This is what I tried on the PERSON page . But when clicked it doesn't move to the START page ?

window.onhashchange = function() {
    window.history.go(-1);
}

Answer 1

Its simple, You can check if browser back button is clicked or not and If its clicked redirect it to Start Page But Be sure of this because when ever you click back button its always redirect it to your StartPage .

Not tested but I think this will do what you want.

 window.onpopstate = function(){
    window.location="StartPage";//you page
   };

Answer 2

To make a back button skip a page in the flow, link to the NEXT page using location.replace. So on the team page:

$(function() {
  $(".person").on("click",function(e) { // when clicking
   e.preventDefault();
   location.replace(this.href); // replace team page with person page in the history
  });  
});

assuming

<a href="frank.html" class="person">Frank</a>
<a href="bob.html" class="person">Bob</a>

Answer 3

I guess you could do it by keeping track of the navigation on your website, as a small example, I wrote this fiddle which checks the navigation and if it conforms to team,person,team it will take the user back to the home page

I guess the main part here would be to handle the navigation of the user yourself and check if it conforms with what you are expecting. To make sure they can then still access the team site, it would also be good that you clear the navigation in the mean time

function handleNavigation() {
    var loc = document.location.href.split('#')[1];
    if (!loc) {
        loc = 'home';
    }
    console.log(loc);
    toggleClass(curloc, 'inactive');
    toggleClass(loc, 'inactive');
    if (curloc != loc) {
        tracker.push(loc);
        curloc = loc;
        if (tracker.length > 3) {
            tracker.shift();
        }
        if (tracker.join(',') === 'team,person,team') {
            document.location.replace(document.location.href.split('#')[0]);
            return;
        }
    }
}

window.addEventListener('hashchange', handleNavigation);
window.addEventListener('load', handleNavigation);