Make browser delete specific history states
I have an ajax driven website where I have two types of pages displayed to the user. For simplicity, call them MAINPAGE s and SUBPAGE . MAINPAGE contains information, and SUBPAGE is all the forms in which the user can add or modify existing MAINPAGE information .
If my site is visited by a user with an HTML5 compatible browser, I use HistoryJS to update the URL when they visit my site. Let the following example be given:
A user entered my site and went to the following pages in the following order, and his story looks something like this:
MAINPAGE (1) → MAINPAGE (2) → SUBPAGE (1) → SUBPAGE (2)
When the user fills out the form on SUBPAGE (2) , I want to redirect him directly to the last MAINPAGE he visited. For example, when a user fills out a form, I would like the user story to be like this:
MAINPAGE (1) → MAINPAGE (2)
Visually, I can achieve this, everything works correctly, but then, in the HTML5 browser, if I click the native button in the browser, the page tries to revert to SUBPAGE (1) , the correct state back from the original history.
Is it achievable to remove some of the history states, and if so how can I do this?
Here is the code I am using 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
}
source to share
I managed to solve this problem by changing the code as follows:
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
}
source to share