Make browser delete specific history states

Question

I have an ajax controlled website, where I have two types of pages, displayed to the user. For the simplicity let's call them MAINPAGE s and SUBPAGE s. MAINPAGE s contain information, and SUBPAGE s are all forms, where the user can add or modify existing information of a MAINPAGE for example.

If my site is visited by a user with HTML5 compatible browser, I use HistoryJS to update the url when he/she navigates on my website. Let's pressume the following example:

The user entered my website and navigated to the following pages in the following order, and his history looks something like this:

MAINPAGE(1) --> MAINPAGE(2) --> SUBPAGE(1) --> SUBPAGE(2)

When the user completes the form on SUBPAGE(2) , I want to redirect him immediatly to the last MAINPAGE he visited. So for example when the user completes the form, I would like that the users history to be this:

MAINPAGE(1) --> MAINPAGE(2)

Visually, I am able to achieve this, everything works correctly, but afterwards, in a HTML5 browser, if I press the native back key on the browser, the page tries to revert to SUBPAGE(1) , the correct back state from the initial history .

Is it achievable, to delete some of the history states, and if yes, how can I do that?

Here's the code I use so far:

ConverserNavigation.prototype.getPreviousMainAction = function() {
 // NOTE: the code that deals with non HTML5 compatible browsers, 
 // was removed because everything works fine there
 var startFrom, found=false;

 if (this.HistoryJS.status==true) startFrom=History.getState().data.id;    
 // if browser is HTML5 compatible, get the current state from History object, 
 // which is a HistoryJS object

 while ((!found) && (startFrom>0)) // find the last MAINPAGE visited by user
 {
     startFrom--;
     if (this.historyData[startFrom].pageData.page != 'quickactions') found=true;   
 }



 if (this.HistoryJS.status==true) History.replaceState({id:startFrom}, this.historyData[startFrom].urlData.title, this.historyData[startFrom].urlData.url);
 // replace the current history state, with the one to where we want to revert

 this.currentNavigationId=startFrom;
 this.back(); // render the ui to navigate back to the previous page, works as intended
 for (var i=this.currentNavigationId;i<this.historyData.length;i++) delete this.historyData[i]; // delete the unused history data

}

Answer 1

I've managed to solve this issue by modifying my code the following way:

Replaced this line:

if (this.HistoryJS.status==true) History.replaceState({id:startFrom}, this.historyData[startFrom].urlData.title, this.historyData[startFrom].urlData.url);

with this:

if (this.HistoryJS.status==true) {
    History.go(goBack); //goBack is the number of states I have to backtrack
    this.HistoryJS.manualStateChange=false; // telling the browser to not fire my own UI updating functions
    History.back(); // navigating one more state back in the History object
    History.pushState({id:startFrom}, this.historyData[startFrom].urlData.title, this.historyData[startFrom].urlData.url); // recreating the original state in the History.
    this.HistoryJS.manualStateChange=true; // restarting the UI update functions on pop or push events
}