HTML5 history disabling forward button

Question

I am writing a single page javascript application using the HTML5 History API. The application loads content via Ajax and internally maintains state information on the foreground screen using a screen stack.

I want to enable navigation with the back button, but I never want to the forward button to be enabled.

A couple quick bits of information:

• The user should only ever be able to go back, never forward
• Pressing browser back button closes the current page screen user is on and reloads the previous one
• Project is targeted towards the latest version of Chrome only, so other browsers implementations are not important
• I am using native JavaScript and jQuery only, I would like to do this without History.js

When I load a new screen I run the following line:

history.pushState(screenData, window.document.title, "#");

I bind to the popstate event via jQuery:

$(window).bind("popstate", function(event) {
    if (event.originalEvent.state != null) {
        // Logic that loads the previous screen using my screen stack
    }
}); 

My application's history management is working, however when I go back the forward button is enabled. I need to figure out how to remove data from history on the popstate event.

Can I do this with replaceState? I'm not sure how to go about doing this...

Answer 1

Bad Part

To really disable the forward button, you would have to be able to delete browser history, which is not allowed by all javascript implementations because it would allow sites to delete the entire history, which would never be in the interest of the user.

Good Part

This is a bit tricky, but I guess it could work if you want to do custom history. You could just use pushState in the popstate event to make your actual page the topmost history entry. I assume the way you handle your history, your window will never unload. This allows you to keep track of the user history yourself:

var customHistory = [];

Push every page you load with history.pushState(screenData, window.document.title, "#");, like you did before. Only you add the state to your custom history, too:

history.pushState(screenData, window.document.title, "#");
customHistory.push({data: screenData, title: window.document.title, location: '#'});

now if you have a popstate event, you just pop you custom history and push it to the topmost entry:

window.onpopstate = function(e) { 
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
}

Or in jQuery

$(window).on('popstate', function(e) {
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
});