Historia API html5, jak się dowiedzieć, kiedy użytkownik kliknął przycisk następnej/poprzedniej przeglądarki?

Question

ja poznania API HTML5 historii, ale używam history.js rozszerzyć kompatybilność,

Mam jedno pytanie i to, że jak mogę wiedzieć:

  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?? */ 
      }); 

To jest mój "cały" kod ...

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

       }); 

      }); 

Bo jedynym powodem, dla którego powinienem sprawdzić historię jest przycisk NEXT/BACK, prawda? w przeciwnym razie zasady kotwica href

-EDIT-

zasadzie muszę warunek stąd

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

Dzięki z góry

Answer 1

Możesz śledzić wszystkich stanach (linki) w tablicy i na popstate (lub statechange) porównać nową lokalizację, do starego w tablicy więc będziesz wiedzieć, w jaki sposób użytkownik poszedł w historii (z tyłu lub FWD).

Albo można przejść w state obj (pierwszy param do pushState) znacznik czasu i porównać go do starego

Wariant 1 (ma problemy - nie używaj)

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

      }); 

     }); 

}()) 

Ta opcja ma wątpliwości, że będzie się mylić, jeśli ten sam link będzie w historii więcej niż raz

Wariant 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: Nie testowałem, czy to działa, czy nie działa prosimy o skrzypce i I'l spróbować go naprawić

Answer 2

Nie musiałby specjalnie sprawdzić, czy obok lub z tyłu przycisk jest wyzwalany. "zmiana statyczna" jest zdarzeniem, które zostanie wyzwolone po naciśnięciu przycisku następnego lub Wstecz. Tak więc na podstawie zmiany adresu URL możesz manipulować treścią HTML.

Również zmiana statusu jest uruchamiana przy różnych okazjach w różnych przeglądarkach. Chrome na przykład ładuje zdarzenie statechange zaraz po załadowaniu strony, nawet po odświeżeniu, gdy tak nie jest w przypadku firefox.