Question

Short question:

I’m trying to make that in a given page (uses tabs) back button doesn’t change page URL (history). It is, I need when user press back button the tab changes, but not the URL displayed. How can I do that with the Address plugin?

Long question:

In addition to the explained above, I have to say I’m using the address plugin like this:

$.address.strict(false);
$.address.externalChange(function(e) {
    changePageFunction(e.value);
});

Inside this changePageFunction() I’m setting $.address.title(the_title); and $.address.value(the_value);. What I’ve tried is to change the direct call to changePageFunction() by something like this:

$.address.externalChange(function(e) {
    if (!isTabsPage) {
        changePageFunction(e.value);
    } else {
        changeTab();
    }
});

This works, but URL displayed is changed (goes back one position for each back button pressed).

I cannot:

• add a different URL to each tab (like in $.address samples)
• change address plugin for other similar
• change current paging system (a bit complex)

The idea is that if isTabsPage is true then the changeTab() function will work, if not, the current method will work ($.address history managed)

Is there any way to freeze the history?

Answer 1

HTML5 has a native history object to handle this. You’ll need to use its pushState function as the user changes tabs and handle its popState event when the user navigates forwards/backwards. There is a wonderful polyfill for older browsers by @balupton here.