Rileva cambiamento nel valore hash dell'URL utilizzando JavaScript

Question

Sto lavorando a una semplice applicazione basata su una singola pagina (a causa di limitazioni del progetto) e con contenuti dinamici. Comprendo i contenuti dinamici, ma quello che non capisco è come impostare uno script che modifichi l'html di uno div quando cambia il valore dell'hash nell'URL.

ho bisogno di uno script JavaScript per funzionare come tale:

Url: http://foo.com/foo.html div contenuti: <h1>Hello World</h1>

Url: http://foo.com/foo.html#foo div contenuti: <h1>Foo</h1>

Come questo lavoro?

Si prega di aiuto! Grazie.

Answer 1

È possibile ascoltare l'evento hashchange:

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

Answer 2

personalmente, mi piacerebbe utilizzare sammy che ti dà la flessibilità al modello l'hashtag (aggiungere segnaposto ed essere in grado di leggere di nuovo). per esempio.

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

Un esempio può essere trovato qui: http://jsfiddle.net/KZknm/1/