Question

我试图将一个功能写入ajaxyfy网站，一切都很完美，除了后退按钮的功能。

这就是我现在所拥有的：

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 。无论触发了什么功能，如何使它适用于所有三个功能？

修改

我真正想到的是功能：

 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 ，但后退按钮仅适用于这三个功能中的一个。我希望它适用于所有人。

Answer 1

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

我改变了

history.pushState(null, null, homepage);

为：

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

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

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

使用：

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

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

如何命名一个jQuery函数来使浏览器的后退按钮工作？

1 个答案: