简体   繁体   中英

How to name a jQuery function to make a browser's back button work?

I'm trying to write a function to ajaxyfy a web site, everything works perfect, except function for a back button.

That's what I have for now:

function loading() {
    if (typeof history.pushState !== "undefined") {
        var historyCount = 0;

        $('.menu-item, .logo').on('click','a',function(e){
            e.preventDefault();
            $(this).data('clicked', true);
            if ($(this).is('.logo a')) {
            var homepage = $(this).attr('href');
                function1(homepage);
                history.pushState(null, null, homepage);
            }
        else if ($(this).is('.projects a')) {
                var projects = $(this).attr('href');
                function2(projects);
                history.pushState(null, null, projects);    
        }
        else {
                var pages = $(this).attr('href');
                function3(pages);
                history.pushState(null, null, pages);
        }

        });
        window.onpopstate = function(){
            if(historyCount) {
                goTo(document.location);
            }
            historyCount = historyCount+1;
        };
    }
}


function function1(homepage) {
    $.ajax({
        url: homepage,
        success: function(data) {
           $('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
                $(this).html(data).show('slide', {direction: 'right'}, 300);
                console.log('home');
            });
        }
    });
}


function function2(projects) {
    $.ajax({
        url: projects,
        success: function(data) {
           $('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
                $(this).html(data).show('slide', {direction: 'right'}, 300);
                console.log('projects');
            });
        }
    });
}


function function3(pages) {
    $.ajax({
        url: pages,
        success: function(data) {
           $('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
                $(this).html(data).show('slide', {direction: 'right'}, 300);
                console.log('page');
            });
        }
    });
}

and there is a problem with

 window.onpopstate = function(){
        if(historyCount) {
            goTo(document.location);
        }
        historyCount = historyCount+1;
    };

If I leave goTo it doesn't work at all, if i put a name of any other function, ie function1 , it works only for function 1. How to make it work for all three functions regardless of what function has been triggered?

EDIT

What I'm really concrned about is function:

 window.onpopstate = function(){
        if(historyCount) {
            goTo(document.location);
        }
        historyCount = historyCount+1;
    };

It's name is, as can be clearly seen, goTo (because primarily it was related to a function named goTo(href) ). In if conditional tags I call functions: function1 , function2 , function3 , which replaced earlier existent function goTo(href) . When I divided function to three idividual functions, above window.popstate... function stopped to work. I need to have three different function because I need to three different thing happen when clicking on different menu buttons. I can replace goTo with function1 or function2 ...etc, but then the back button works only for the oneof those three functions. And I want it to work for all of them.

Well, I managed to do everything by myself. I digged a bit deeper into HTML5 push.state and and I made following changes:

I changed

history.pushState(null, null, homepage);

to:

history.pushState('function1', null, homepage);

I did analogous changes to two other push.state functions. Then I replaced

window.onpopstate = function(){
  if(historyCount) {
    goTo(document.location);
  }
historyCount = historyCount+1;
};

with:

window.onpopstate = function(){
  if(historyCount) {
  var JSONattr = (JSON.stringify(event.state).replace(/\"/g, ""));
    window[JSONattr](document.location);
  }
historyCount = historyCount+1;
};

what pulls a name of every of three functions from push.state , and thanks to that, with every browser's back button hit, the desired function is being executed.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM