1

I'm using ajax to simulate a menu. All is fine but the back and forward buttons are not perfectly working.

So the code is:

$('#sdt_menu a').on('click', function (e) {
    href = $(this).attr("href");
    e.preventDefault();
    window.onpopstate = function (event) {
        document.url = event.state.url;
        loadSpecificPage(window.location.pathname);
    };
    pushingState(href);
})

window.onpopstate looks for changes in the history. pushingState just pushes the new page to the history.

With this the menu items are correctly loaded into the browser history. But when I hit the back button for instance, the window.onpopstate as well as my pushingState function is triggered. So let's say I'm on page 1 and now load page 2. When I hit the back button now in the browser, I correctly go back to page 1 but I reload page 1 and go to it. So at the end I was not going back correctly. So the pushingState function shall not be triggered, then it should work properly. I at least just replaced the current page with the last in the current way.

Summary: the window.onpopstate is working properly. But the pushingState function shall not be triggered when hitting the browser back/forward button.

So my idea was to create an if statement that checks if one of the buttons was clicked. But I did not find something like that. Here some links that did not work for me: detect back button click in browser and JavaScript or jQuery browser back button click detector

Maybe I'm thinking too hard into this direction and it's even easier somehow?

Added pushingState function

function pushingState(href){
    if (href == "/about" || href == "/about/") {
        history.pushState('About', 'about', href);
    }
    if (href == "/creator" || href == "/creator/") {
        history.pushState('Creator', 'creator', href);
    }
}
Community
  • 1
  • 1
kwoxer
  • 3,734
  • 4
  • 40
  • 70
  • I'm not sure i understand you right, first of all there is not such method pushingState but instead pushState which takes 3 parameters: state object , title , url. try to read this article from mdn: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history – Konrud Mar 24 '15 at 18:59
  • I know, I leaved it away for simplyfication but now added at the end. =) – kwoxer Mar 24 '15 at 19:02

2 Answers2

2

I'm right now using this block of code. It's a little bit different from the original idea, and still not the perfect solution, but at least better and the back and forward buttons are working:

$('#sdt_menu a').on('click', function (e) {
    var href = $(this).attr("href");
    history.pushState(href, '', href);
    e.preventDefault();
    window.onpopstate = function (event) {
        if (event.state != null){
            document.url = event.state.url;
            pushingState(event.state);
        }
    };
});
kwoxer
  • 3,734
  • 4
  • 40
  • 70
0

The recent way to check (available in many browsers, but already deprecated), if the user has used the "back/forward" button, one can check for

performance.navigation.type === 2

Details: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation/type

The most recent approach is (only available in more modern browsers), to check for

performance.getEntriesByType("navigation")[0].type === "back_forward"

Details: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type

RiZKiT
  • 2,107
  • 28
  • 23