Browser Back And Forward Button Does Not Invoke Callback Method With Statechange Event Of History.js

I used (https://github.com/browserstate/history.js) and have a piece of code like this History.Adapter.bind(window, 'statechange', function() { var State = History.getState();

Solution 1:

What you need to do is as follows:

• If the page you came from is another page (e.g. you open page B and the previous page was page A) you do a pushState.
• If on the other hand the previous page was the same page as you're currently on you will simply do a replaceState, replacing the information with information about your current state.

(the tracking of the previous page you will need to do manually in some variable)

This means that if you go from A to B (pushState) to new state of B (replaceState), back button (goes to state info of A) and next forward (goes to the newest state of B). Additionally if you open A the first time you need to do a replaceState with information about the state of A so that A will have some state at least (otherwise it will have an empty data object).

It might be useful to look at this answer of mine, which is simply about the way you would built an ordered history stack with pushStates. Not exactly what you want of course, but it's a bit simpler written and together with the information in this answer it should get you the behaviour you want.

Solution 2:

I see that you are using History.replaceState which remove the last history state in the stack and replace it by the state given in parameters.

I am using History.pushState in my website, and doesn't face such an issue because this function doesnt pull the last state but add the new state above it. It is making the back-forward buttons work correcly.

I hope it helps you.

Edit: Using the example of change of select tag as event listenner:

functionmanageHistory(url, data, uniqueId){
    varHistory = window.History;
    if ( !History.enabled ) { returnfalse; }        
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId);
}

$('select.select').change(function(e) {

    e.preventDefault(); 

    // get url// get data// get uniqueIdmanageHistory(url, data, uniqueId)


});

History.Adapter.bind(window, 'statechange', function() { 
    varState = History.getState();
    // Launch the ajax call and update DOM using State.data.myData
});

Solution 3:

Also,

relpaceState will always erase B state.

Use pushState for A and B states.

And use replacestate for aaa, bbb, ccc states.

functionmanageHistoryBack(url, data, uniqueId){
    varHistory = window.History;
    if ( !History.enabled ) { returnfalse; }        
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId);


}

functionmanageHistory(url, data, uniqueId){
    varHistory = window.History;
    if ( !History.enabled ) { returnfalse; }        
    History.pushState({myData: data}, null, '?stateHistory=' + uniqueId);


}

// Event listenner triggering aaa,bbb,ccc 
$('select.select').change(function(e) {

    e.preventDefault(); 

    // get url// get data// get uniqueIdmanageHistoryBack(url, data, uniqueId)


});

// Event listenner triggering A, B
$('select.select').change(function(e) {

    e.preventDefault(); 

    // get url// get data// get uniqueIdmanageHistory(url, data, uniqueId)


});


History.Adapter.bind(window, 'statechange', function() { 
    varState = History.getState();
    // Launch the ajax call and update DOM using State.data.myData 
});

Good luck