如何命名一个jQuery函数来使浏览器的后退按钮工作？ [英] How to name a jQuery function to make a browser's back button work?

问题描述

我正在尝试为ajaxyfy网站编写一个函数，一切都很完美，除了后退按钮的功能。

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');
            });
        }
    });
}

并且出现问题

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

如果我离开 goTo 它根本不起作用，如果我设置任何其他功能的名称，即 function1 ，它仅适用于功能1.如何使其适用于所有三个功能而不管触发了什么功能？

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

编辑

我真正想到的是功能：

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

可以清楚地看到它的名字是 goTo （因为主要是因为它与名为 goTo（href）的函数有关。在 if 条件标签中，我调用函数： function1 ， function2 ， function3 ，它取代了之前存在的函数 GOTO（HREF）。当我将功能划分为三个单独的功能时， window.popstate ... 功能停止工作。我需要有三个不同的功能，因为当点击不同的菜单按钮时我需要发生三种不同的事情。我可以用 function1 或 function2 等替换 goTo ，但后退按钮仅适用于这三个功能中的一个。我希望它适用于所有人。

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.

推荐答案

好吧，我自己做了一切。我深入研究了HTML5 push.state并且我做了以下更改：

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

我改变了

history.pushState(null, null, homepage);

to：

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

我对其他两个 push.state 函数进行了类似的更改。然后我更换了

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;
};

从 push.state 中提取三个函数的名称，并且由于这一点，每个浏览器的后退按钮都被点击，正在执行所需的功能。

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.

这篇关于如何命名一个jQuery函数来使浏览器的后退按钮工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！