I have a hub that loads pages in to a div with the class 'main', and trying to work out how to be able to go back and forth using browser buttons. I have the following on the settings page:

clickHandler(null, null, 'settings');

This calls the following:

function clickHandler(one,two,three) {
    history.pushState(one, two, three);
}

I know that up to this part, it is passing the 'settings' variable as the address bar is showing /settings when navigating back. So to try and get settings.php to load in to 'main' I am trying the following:

function updateContent(data) {
    if (data == null)
    return;
    console.log(data);
    $(".main").load(data+'.php');   
}

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
  updateContent(document.location)
};

However, unless I press back twice really quickly, it's not loading the correct page.