history.back(-1) without refreshing the last page?

Question

I'm creating Pinterest like modal overlays using Rails 4. They're displayed in a semi transparent overlay ontop of an infinite scroll page.

Currently, when you click the link the browser's history is changed to reflect the item you're viewing. However I have an exit button that when pressed, I'd like to have it remove the overlay (which it already does), but then change the URL back without losing the user's place on the infinite scroll.

How exactly does pinterest accomplish changing the URL back without refreshing the last page? I would use pushState with '/' but I have multiple types of infinite scroll pages and I'd like the script to work for all of them.

application.js

if (history && history.pushState){
  $(function(){
   $('body').on('click', 'a', function(e){
      $.getScript(this.href);
      history.pushState(null, '', this.href);
    });
    $(window).bind("popstate", function(){
      $.getScript(location.href);
    });
  });
}

close overlay script

function removeDabble() {
    history.back(-1);

    /*var elem = document.getElementById('artview');
    elem.parentNode.removeChild(elem);
    return false;*/
}

Answer 1

best solution is use some kind of route scripts. like davis, sammy, crossroads, director, routes.js .... theres quite a lot of choices.

you can easily achieve either pushstate/hashtag style back and forward without refreshing the page. These plugins can help you deal with order browsers that does not support pushstates.

If you don't need to take care of old browsers. you can just change the url without refreshing the page by

// this go to the new url
window.history.replaceState(“”, “Title”, “/newUrl”);

// first param is if you want to parse some data around, but its best to just use localstorage/session storage or cookie, and a event listener. 

// second parameter is the page title, some browser ignores it

// last param is the url  eg : 
        '/newUrl'   => .com/newUrl,  
        '/1/2/3'    => .com/1/2/3

to achieve history.back, like what you wanted. you can create a new array in

eg: browserHistory = []

on every change of url, push the url into that array, i normally put a limit of 10, and it discards the earlier ones, but its up to you.

function updateHistory(url) {
    window.browserHistory = window.browserHistory? window.browserHistory : [];
    if (window.browserHistory.length > 10) {
         window.browserHistory = window.browserHistory.shift()
    }
    window.browserHistory.push(url)
}

Than with our own version of history.back, you just use the above method to replace the last url in your array, you can pop, or just keep on appending to the array for this. and do your other actions.