History API html5，如何知道用户何时单击下一个/后退浏览器按钮？ [复制]

我正在熟悉 html5 History API，但我正在使用历史.js https://github.com/browserstate/history.js/扩展兼容性，

我有一个问题，那就是，我怎样才能知道：

            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                        /* Condition here to know if this change is a back or next button, and wich one?? */
            }); 

这是我的“完整”代码......

var the = this;
            var History = window.History;
            if ( !History.enabled ) {
                return false;
            }
            /* Store the initial content*/
            History.replaceState({
              content: $('#main').html()
            }, document.title, document.location.href);
            /* Bind to StateChange Event */
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                //console.log(State);
                //History.log(State.data, State.title, State.url);
                console.log(history.length);
            });         
            /* triggers */
            $(document).on('click','a',function(e){
                e.preventDefault();
                var href = $(this).attr('href');
                var title = $(this).text();
                if(href == '#')
                    href = title;
                $.get('portfolio.html',function(data, response){
                    var html = $(data).find('#main-content').html();
                    //console.log(html);


                    $('#ajax-load').html(html);
                    History.pushState({ content: html}, title, href);
                    $('#ajax-load').css({ position:'absolute', 
                                          right: -$(window).width(), 
                                          top: the.header.height(), 
                                          width: $(window).width(),
                                          zIndex:999
                    }).animate({ right: 0 },300,function(){
                        console.log($('#main-content').length);
                        console.log($('#ajax-load').length);
                        $('#main-content').html(html);
                        $('#ajax-load').html('');
                    });

                });

            });

因为我实际上应该检查历史记录的唯一原因是“下一个/后退”按钮，对吧？否则锚点 href 规则

-EDIT-

基本上我需要这里的条件

History.Adapter.bind(window,'statechange',function(){ 
                var State = History.getState(); 
                var condition = false;
                if(condition){
                    console.log('You clicked the next/back button');
                }
}); 

提前致谢

您可以跟踪数组中的所有状态（链接）popstate (or statechange）将新位置与数组中的旧位置进行比较，以便您知道用户在历史记录中走了哪条路（后退或前进）。

或者您可以通过state obj（pushState 的第一个参数）时间戳并将其与旧的进行比较

Option 1（有问题 - 不要使用）

(function(){
    /*adding some init vars*/
    var the = this, arr = [], currPage;
    var History = window.History;
    if ( !History.enabled ) {
        return false;
    }
    /* Store the initial content*/
    History.replaceState({
      content: $('#main').html()
    }, document.title, document.location.href);
    /* add to arr*/
    arr[arr.length] = document.location.href;
    /*keep track of where we arein arr*/
    currPage = arr.length -1;
    /* Bind to StateChange Event */
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
            var position, button;
            var State = History.getState(); // Note: We are using History.getState() instead of event.state
            //console.log(State);
            //History.log(State.data, State.title, State.url);
            console.log(history.length);
            position = arr.indexOf(document.location.href);
            button = position > currPage ? "fwd" : "back";
            currPage = position;
            console.log("You pressed The "+ button + " Button");
        });         
        /* triggers */
        $(document).on('click','a',function(e){
            e.preventDefault();
            var href = $(this).attr('href');
            var title = $(this).text();
            if(href == '#')
                href = title;
            $.get('portfolio.html',function(data, response){
                var html = $(data).find('#main-content').html();
                //console.log(html);


                $('#ajax-load').html(html);
                History.pushState({ content: html}, title, href);
                /* add to arr */
                arr[arr.length] = href;
                /* keep track */
                currPage = arr.length -1;
                $('#ajax-load').css({ position:'absolute', 
                                      right: -$(window).width(), 
                                      top: the.header.height(), 
                                      width: $(window).width(),
                                      zIndex:999
                }).animate({ right: 0 },300,function(){
                    console.log($('#main-content').length);
                    console.log($('#ajax-load').length);
                    $('#main-content').html(html);
                    $('#ajax-load').html('');
                });

            });

        });

}())

这个选项有一个问题，如果同一个链接在历史记录中出现多次，它会变得混乱