History API html5, come sapere quando l'utente ha fatto clic sui pulsanti del browser successivo/posteriore?

Question

io sono sempre familiarità con l'API HTML5 Storia, ma sto usando history.js per estendere la compatibilità,

ho una domanda ed è che, come posso sapere a:

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

Questo è il mio codice "tutto" ...

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

       }); 

      }); 

Perché l'unica ragione per cui dovrei in realtà controlla per la storia è per il pulsante NEXT/indietro, giusto? altrimenti le regole di ancoraggio href

operativa -Editazione-

fondamentalmente ho bisogno la condizione da qui

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

Grazie in anticipo

Answer 1

È possibile tenere traccia di tutti gli stati (collegamenti) in una matrice e su popstate (o statechange) confrontare la nuova posizione con quella precedente nell'array in modo da sapere in che modo l'utente è passato alla cronologia (indietro o avanti).

Oppure si può passare lungo nel state obj (il primo parametro a pushState) un timestamp e confrontare che al vecchio

Opzione 1 (ha problemi - non utilizzare)

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

      }); 

     }); 

}()) 

Questa opzione ha un problema che si confonderà se lo stesso link sarà nella storia più di una volta

Opzione 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: non ho ancora testato se funziona, se non funziona si prega di fare un violino e I'l cercare di risolvere il problema

Answer 2

Non avrebbe bisogno di vedere specificatamente se il prossimo o posteriore il pulsante è attivato. 'statechange' è l'evento che verrà attivato quando si preme il pulsante Avanti o Indietro. Quindi, in base al cambiamento dell'URL, puoi manipolare il tuo contenuto html.

Inoltre, la modifica di stato viene attivata in diverse occasioni anche in diversi browser. Chrome, ad esempio, carica l'evento statechange non appena viene caricata una pagina, anche durante l'aggiornamento, mentre non è questo il caso per Firefox.