Wykryj zmianę wartości mieszania adresu URL przy użyciu JavaScript

Question

Pracuję nad prostą aplikacją, która jest oparta na jednej stronie (ze względu na ograniczenia projektu) i ma zawartość dynamiczną. Rozumiem, że zawartość dynamiczna jest w porządku, ale nie rozumiem, jak skonfigurować skrypt, który zmienia kod HTML o div, gdy zmienia się wartość skrótu w adresie URL.

muszę skrypt JavaScript, który działa jako takie:

URL: http://foo.com/foo.html div treść: <h1>Hello World</h1>

URL: http://foo.com/foo.html#foo div zawartość tematyczna: <h1>Foo</h1>

Jak to będzie działać?

Proszę pomóc! Dzięki.

Answer 1

Można słuchać przypadku hashchange:

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

Answer 2

osobiście użyję sammy co daje elastyczność w szablonie hashtag (dodaj zastępcze i być w stanie odczytać je z powrotem). na przykład

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

Przykład można znaleźć tutaj: http://jsfiddle.net/KZknm/1/