जावास्क्रिप्ट

Question

का उपयोग कर URL के हैश मान में परिवर्तन का पता लगाएं मैं एक साधारण एप्लिकेशन पर काम कर रहा हूं जो एकल पृष्ठ आधारित है (परियोजना प्रतिबंधों के कारण) और गतिशील सामग्री है। मैं गतिशील सामग्री को ठीक से समझता हूं लेकिन जो मुझे समझ में नहीं आता है वह है कि एक स्क्रिप्ट को सेट अप करना है जो div के HTML को बदलता है जब URL में हैश मान बदलता है।

मैं ऐसे के रूप में काम करने के लिए JavaScript स्क्रिप्ट की जरूरत है:

यूआरएल: http://foo.com/foo.html div सामग्री: <h1>Hello World</h1>

यूआरएल: http://foo.com/foo.html#foo div सामग्री: <h1>Foo</h1>

यह कैसे काम करेंगे?

कृपया मदद करें! धन्यवाद।

Answer 1

आप hashchange घटना को सुन सकते हैं:

$(window).on('hashchange',function(){ 
    $('h1').text(location.hash.slice(1)); 
}); 

Answer 2

व्यक्तिगत रूप से, मैं sammy जो आप हैशटैग टेम्पलेट (प्लेसहोल्डर जोड़ सकते हैं और उन्हें वापस पढ़ने में सक्षम हो) के लिए लचीलापन प्रदान करता है का उपयोग करेंगे। जैसे

<script src="/path/to/jquery.js"></script> 
<script src="/path/to/sammy.js"></script> 
<script> 
    $(function(){ 
     // Use sammy to detect hash changes 
     $.sammy(function(){ 
      // bind to #:page where :page can be some value 
      // we're expecting and can be retrieved with this.params 
      this.get('#:page',function(){ 
       // load some page using ajax in to an simple container 
       $('#container').load('/partial/'+this.params['page']+'.html'); 
      }); 
     }).run(); 
    }); 
</script> 

<a href="#foo">Load foo.html</a> 
<a href="#bar">Load bar.html</a> 

एक उदाहरण यहां पाया जा सकता: http://jsfiddle.net/KZknm/1/