5

मेरे पास एक उदाहरण कोड है जहां आप लिंक पर क्लिक करते हैं, फिर पीछे और आगे का उपयोग करें, प्रत्येक राज्य परिवर्तन 'राज्य परिवर्तन' घटना पर अधिक से अधिक हिट का कारण बन जाएगा। मुझे उम्मीद है कि एक के बजाय।इतिहास.जेएस के साथ एक राज्य परिवर्तन घटना को कैसे पकड़ें?

लिंक:

कोड:

<!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> 

उत्तर

6

यह है क्योंकि आप जब आप पृष्ठ है, जो भी कारण बनता है लोड 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,"",""); 
4

जबकि अपने विशिष्ट समस्या के लिए प्रासंगिक नहीं है, मैं एक परिदृश्य में जहाँ मैं इतिहास एडाप्टर से ईवेंट हैंडलर निकल करने के लिए आवश्यक था। ऐसा करने के लिए आप खिड़की से "statechange" घटना है, जो है क्या History.Adapter जब आप History.Adapter.bind() कॉल करने के लिए बांधता निकल कर सकते हैं:

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

आप इस घटना के लिए एक नाम स्थान जोड़ा से बचने के लिए कर सकते हैं उपरोक्त के रूप में अन्य असंबंधित ईवेंट हैंडलर को अनबाइंड करना, या विशेष रूप से उस फ़ंक्शन को अनबिंड करने के लिए नामित फ़ंक्शन का उपयोग करना। ऊपर नाम स्थान का उपयोग करने के लिए आपको, हैंडलर एक ही नाम स्थान का उपयोग कर बाध्य करने के लिए की आवश्यकता होगी यानी

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

धन्यवाद, मैं एडाप्टर वस्तु में अनबाइंड समारोह खोजने की कोशिश कर रहा था: / – Tamara