history.jsで状態変更イベントを一度キャッチする方法は？

私は、リンクをクリックし、前後に使用すると、各状態の変更によって 'statechange'イベントがますます増加します。私が期待するものの代わりに。history.jsで状態変更イベントを一度キャッチする方法は？

リンク：

コード：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>History start</title> 
</head> 
<body> 
    <h1>Headline</h1> 
    <hr> 
    <div id="menu"> 
     <ul> 
      <li> 
       <a href="page-1">Page 1</a> 
       <div style="display:none;"> 
        <h2>Page 1</h2> 
        <p>Content 1</p> 
       </div> 
      </li> 
      <li> 
       <a href="page-2">Page 2</a> 
       <div style="display:none;"> 
        <h2>Page 2</h2> 
        <p>Content 2</p> 
       </div> 
      </li> 
     </ul> 
    </div> 
    <hr> 
    <div id="content"> 
     <h2>Start page</h2> 
     <p>Paragraf</p> 
    </div> 
    <script src="external/jquery-1.6.2.min.js"></script> 
    <script>if (typeof window.JSON === 'undefined') { console.log("Loaded json2"); document.write('<script src="external/json2.js"><\/script>'); }</script> 
    <script src="external/history.adapter.jquery.js"></script> 
    <script src="external/history.js"></script> 
    <script> 
    $(document).ready(function() { 
     History.enabled = true; 

     $('a').each(function() { 
      $(this).click(function(e) { 
       e.preventDefault(); 
       var $link = $(e.target), 
        state = {'href': $link.attr('href'), 'title': $link.html()}, 
        $div = $link.siblings('div'), 
        content = $div.html(); 

       $('#content').html(content); 

       History.pushState(state, state.title, state.href); 

       return false; 
      }); 
     }); 

     History.Adapter.bind(window, 'statechange', function() { 
      var State = History.getState(); 
      // remove double hit on event 
      console.log(State); 

     }); 

    }); 
    </script> 
</body> 
</html>

出典

2011-10-13 Alexander Morland

あなたも原因となるページをロードするときにpushState機能を呼び出しているので、それはです状態変化。私は似たような状況にあり、私のpushStatesの前にブール値を使用していたので、私はpushStateをやっていることを知っていました。あなたの特定の問題に関連していない、私は歴史アダプターからイベントハンドラをバインド解除するために必要なシナリオを持っていますがそれは...このよう

historyBool = true; 
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 

    //don't run our function when we do a pushState 
    if(historyBool){ 
     historyBool = false; 
     tempFunction = new Function(State.data.ajaxRunFunction); 
     tempFunction(); 
    } 
    historyBool = true; 
}); 

historyBool = false; 
historySet = {ajaxRunFunction: "upc('" + pageID + "','')"}; 
History.pushState(historySet,"","");

出典

2011-11-30 01:53:10

を探します。

$(window).unbind('statechange.namespace');

あなたが避けるために、イベントに名前空間を追加することができますので、あなたはHistory.AdapterあなたはHistory.Adapter.bind（）を呼び出したときに特異的に結合するものであるウィンドウから「のStateChange」イベントを、アンバインドすることができます行うには、上記のような他の無関係のイベントハンドラのバインドを解除するか、名前付き関数を使用してその関数を具体的にバインド解除します。上記の名前空間を使用するには、あなたはすなわち

History.Adapter.bind(window,'statechange.namespace',function(){...}

出典

2013-10-14 20:55:51 lvanzyl

、同じ名前空間を使用してハンドラをバインドする必要があるおかげで、私は、アダプタオブジェクトにバインド解除機能を見つけるためにしようとしていました：/ – Tamara

history.jsで状態変更イベントを一度キャッチする方法は？

答えて

関連する問題