JavaScript kullanarak URL'nin karma değerindeki değişikliği saptayın

Question

Tek sayfa tabanlı (proje kısıtlamaları nedeniyle) ve dinamik içeriğe sahip basit bir uygulama üzerinde çalışıyorum. Dinamik içeriği iyi anlıyorum ama anlamadığım şey, URL'deki karma değeri değiştiğinde div'un html'sini değiştiren bir komut dosyasının nasıl ayarlanacağıdır.

ben gibi çalışmak için bir JavaScript komut dosyası gerekir:

URL: http://foo.com/foo.html div içeriği: <h1>Hello World</h1>

URL: http://foo.com/foo.html#foo div içeriği: <h1>Foo</h1>

Bu nasıl iş ki?

Lütfen yardım edin! Teşekkürler.

Answer 1

Sen hashchange olay dinleyebilirsiniz:

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

Answer 2

şahsen, sana hashtag şablon (tutucuların ve onları geri okumak mümkün) esnekliğini kazandıracaktır sammy kullanmayı tercih ediyorum. Örneğin.

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

bir örnek

burada bulunabilir: