7

我正在熟悉 html5 History API，但我正在使用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('');
                    });

                });

            });

因为我实际上应该检查历史记录的唯一原因是 NEXT/BACK 按钮，对吧？否则锚href规则

-编辑-

基本上我需要这里的条件

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

提前致谢

4

2 回答 2

2

您可以跟踪数组中的所有状态（链接），然后popstate（或statechange）将新位置与数组中的旧位置进行比较，这样您就可以知道用户在历史记录中的路径（后退或前进）。

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

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

            });

        });

}())

这个选项有一个问题，如果同一个链接在历史记录中不止一次，它会混淆

选项 2

    (function(){
    /*adding some init vars*/
    var the = this, currPageTime;
    var History = window.History;
    if ( !History.enabled ) {
        return false;
    }
    /* Store the initial content*/
    /* remember the current time */
    currPageTime = new Date().getTime();
    History.replaceState({
      content: $('#main').html(),
      time : currPageTime
    }, document.title, document.location.href);
    /* Bind to StateChange Event */
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
            var pageTime, 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);
            /*NOTE: I never used getState so i dont know if State.time will exist, if not change it to whatever  holds the time we passed earlier */
            pageTime = State.time;
            button = pageTime > currPageTime ? "fwd" : "back";
            currPageTime =  pageTime;
            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);
                /* keep track of time */
                currPageTime = new Date().getTime();
                History.pushState({ content: html, time: currPageTime}, 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('');
                });

            });

        });

}())

PS：我没有测试它是否有效，如果它不起作用，请制作小提琴，我会尝试修复它

于 2013-05-29T14:15:00.323 回答
1

您不需要专门查看是否触发了下一个或后退按钮。'statechange' 是按下下一个或后退按钮时将触发的事件。因此，根据 url 更改，您可以操纵您的 html 内容。

此外，在不同的场合以及在不同的浏览器中都会触发 statechange。例如，Chrome 会在任何页面加载时立即加载 statechange 事件，即使在刷新时也是如此，而 Firefox 则不是这样。

于 2013-05-27T08:30:22.420 回答