履歴API html5、ユーザーが次回/後ろのブラウザボタンをクリックしたときを知る方法は？

Question

私は一つの質問を持っており、それが中でどのように私は知ることができる、ということだ、

を私はHTML5履歴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ルール

-EDIT-

基本的に私はあなたが、特に次またはバックかどうかを確認する必要はありません事前

Answer 1

アレイ内のすべての状態（リンク）を追跡でき、popstate（またはstatechange）は、新しい場所と配列内の古い場所を比較するので、ユーザーが履歴にどのようにアクセスしたかを知ることができます）。

それとも、（pushStateに最初のparam）state objにタイムスタンプを一緒に渡し、古い

オプション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(''); 
       }); 

      }); 

     }); 

}()) 

このオプションは、同じリンクが

回以上の歴史になる場合、それは混乱になるという問題があります10

オプション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：それが動作するかどうか、それが動作しない場合、私はバイオリンを作り、I'lはそれ

Answer 2

でここ

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

おかげから条件を必要としますボタンがトリガーされます。 'statechange'は、次または戻るボタンが押されたときにトリガーされるイベントです。したがって、あなたのHTMLコンテンツを操作することができるURLの変更に基づいて。

また、さまざまな状況で異なるブラウザーでも状態変更が発生します。 たとえば、Chromeでは、ページが読み込まれるとすぐにstatechangeイベントがロードされます。これは、refreshであってもfirefoxの場合と異なります。