jQuery get last visited url in ajax page

Question

I am creating a web app using ajax and I am facing a problem in getting the last visited URL so that I can reload the content when someone presses back button on browser.

Suppose I am on http://example.com and then I navigated to http://example.com/#hello-world and navigated to http://example.com/#using-custom-function .

It works well when we go forward but when the user clicks on the back button on the browser then the page doesn't loads the content but the URL changes.

I have tried hash change but that also doesn't help as it reloads the page for forward and backward request also.

I am wondering if there is a solution to this.

Here is my ajax function,

function get_gallery_artworks(arguments,data,media,type,page,callback_function, gal_ids){

     /*Masking*/
    //Get the screen height and width
    var maskHeight = jQuery('window').height();
    var maskWidth = jQuery('window').width();

    var loaderWidth = maskWidth/2;

    var overlay_id = 'overlay-div';

    //Set heigth and width to mask to fill up the whole screen
    jQuery('.loader-image').css({
        'left':loaderWidth,
        'top':maskHeight
    });
    jQuery('.overlay').css({
        'opacity':0,
        'height':jQuery(document).height(),
        'width':jQuery(window).width()
    });

    //transition effect     
    jQuery('.overlay').fadeIn(1000);    
    jQuery('.overlay').fadeTo("slow",0.8);


     var loader_height = ((jQuery(document).height())/4);
     var loader_width =  ((jQuery(window).width())/2);
    jQuery('#'+overlay_id).css('left', loader_width);
    jQuery('#'+overlay_id).css('top', loader_height);

    jQuery('#'+overlay_id).css('display',  'block');//alert('#'+id);
    jQuery('#'+overlay_id).css('padding',  '0px 0px 15px 15px');

    //transition effect
    jQuery(overlay_id).fadeIn(2000); 
    var data_str = arguments;

    window.location.hash = 'gallery='+data_str;

    var data_arr = data_str.split("_");  
    collection_id = data_arr['0']; 
    artist_id = data_arr['1'];
    artwork_id = data_arr['2']; 

    jQuery.ajax({
        type : 'POST',
        url : ajax_url,
        data : {
            collection_id:collection_id, 
            artwork_id:artwork_id, 
            artist_id:artist_id, 
            media:media, 
            type:type,
            callback:callback_function,
            navigation:jQuery('.gs-top-navigation').html(),
            gspage:page,
            data : '',//data_obj
            gal_ids : gal_ids
        },   
        success: function(result) { 

            jQuery('.overlay').hide();  
            jQuery('.window').hide();
            jQuery('.gs-content').html(result);
            window.document.body.scrollTop = 0;
        window.document.documentElement.scrollTop = 0;
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            alert(textStatus);
            alert(errorThrown);
            jQuery('.overlay').hide();  
            jQuery('.window').hide();
        }
    });

}

Answer 1

I got it working using

jQuery(window).on('hashchange', function() {
  jQuery("body").load(location.href+' body');
});

But there one issue though i need it to call when the url is previous url like location.href==previous url then i need to run the above