How to enable back button on ajax page

Question

I'm working on a site which navigates as follow:

$(document).ready(function () {
  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    // Back only!
    //location.reload();
    //$('#ajax').load(this.location);
});

The url changes when user navigates, even when user presses the back button. However, the page isn't refreshed when navigating back so only the url changes while the actual page remains the same.

How can I fix this?
Fiddle
Actual site

Answer 1

Adding the page identfier after the # is responsible for the effect. Everything behind # (URL fragment) is supposed to be interpreted by the browser locally. Thus, going back with the same URL but a different fragment does not trigger the browser to do a "reload", since he expects this to be a bookmark.

Change for a real parameter .....?pageid=over_ons.html or go with PATH_INFO .../overons.html

Besides that:

document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)

is just

document.location.hash

Answer 2

Use an array to store history.

$(document).ready(function () {

  var history = [];

  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
    history.push(document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1), function(){
      history.push(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
   });
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
      history.push(url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    $('#ajax').load(history[history.lastIndexOf(document.location.href)-1], function(){
       document.location.href =  "#" + history[history.lastIndexOf(document.location.href)-1];
    });
});

Answer 3

I solved it as following admitted that although it works, it's likely far from the most elegant solution:

var lastLocation = document.location.href;

$(document).ready(function () {
    if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
        document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1) +
            "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
    }

    if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
        $('#ajax').load(window.location.hash.substr(1));
});

$(document).on("click", "a:not(.regular)", function (e) {
    var url = this.href;
    if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
        return;

    e.preventDefault();

    $('#ajax').load(url, function () {
        var pagename = url.substr(url.lastIndexOf('/') + 1);
        // Keep track of last location.
        lastLocation = document.location.href.replace(window.location.hash, "") + '#' + pagename;
        document.location.href = '#' + pagename;
    });
});

window.onpopstate = function (event) {
    // Test if popstate changed while lastLocation wasn't updated.
    if (lastLocation != document.location.href)
        location.reload();
    else
        return;
};

Answer 4

When you navigate with back button ready event is not triggered because of back-forward cache. Instead pageshow event is triggered. You could force page reloading in pageshow event handler.

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};