单击后退按钮时，如何返回上一个状态

Question

I am using the history.pushState to change the content of a page with ajax request.

And its very certain that after a history.pushState , the forward button is disabled in the browser so definitely any button that would be clicked will be the back button.

So I want to go back to the main state of the page before the pushState. I use ajax request to retrieve the contents of the main state but the problem is that how can I make the url in the browser go back to the main url. I don't want to use the pushState method for this due to some issues

I increment a value by one after ever ajax success in other to know how far I have pushState.

var mainState;
var pushed = false;
$('a').click(function(){
    $.ajax({
        url: "/path/to/content",
        success: function(data){
            $('div').html(data);
            history.pushState('state', 'title', 'url');
            mainState ++;
            pushed = true;
        }
    })
})

window.onpopstate(function(){
    if(pushed){  //knowing fully well that the forward button is disabled
        // take it back to the main state
        history.go(-mainState);
    }
})

Let's say the mainState is 3 and I click the back button instead of going to the mainState it takes me to mainState - 3.

Please anyone know I can do this?

Answer 1

var mainState = 3;
-mainState; //-3
--mainState; //2 

Your code should look like this

window.onpopstate(function(){
    if(pushed){
        history.go(--mainState); //FIXED
    }
})