JavaScript를 사용하여 URL 해시 값 변경 감지

Question

프로젝트 제한으로 인해 단일 페이지 기반이고 동적 인 콘텐츠가있는 간단한 응용 프로그램을 작성하고 있습니다. 나는 동적 인 내용을 괜찮은 것으로 이해하지만, URL의 해시 값이 변경되면 div의 html을 변경하는 스크립트를 설정하는 방법을 모르겠다.

나는 같은 일을 자바 스크립트 스크립트를 필요

URL : http://foo.com/foo.html DIV 내용 : <h1>Hello World</h1>

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

예

는 여기에서 찾을 수 있습니다 :