Phát hiện thay đổi về giá trị băm của URL bằng cách sử dụng JavaScript

Question

Tôi đang làm việc trên một ứng dụng đơn giản dựa trên một trang (do hạn chế dự án) và có nội dung động. Tôi hiểu nội dung động không sao nhưng những gì tôi không hiểu là cách thiết lập tập lệnh thay đổi html của div khi giá trị băm trong URL thay đổi.

Tôi cần một kịch bản JavaScript để làm việc như vậy:

Url: http://foo.com/foo.html div nội dung: <h1>Hello World</h1>

Url: http://foo.com/foo.html#foo div nội dung: <h1>Foo</h1>

Làm thế nào sẽ làm việc này?

Vui lòng trợ giúp! Cảm ơn.

Answer 1

Bạn có thể nghe các sự kiện hashchange:

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

Answer 2

cá nhân, tôi muốn sử dụng sammy mang đến cho bạn sự linh hoạt để template hashtag (thêm placeholders và có thể đọc chúng trở lại). ví dụ.

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

Một ví dụ có thể được tìm thấy ở đây: http://jsfiddle.net/KZknm/1/