Обнаружить изменение хэш-значения URL с помощью JavaScript

Я работаю над простым приложением, которое основано на одной странице (из-за ограничений проекта) и имеет динамический контент. Я понимаю динамическое содержимое в порядке, но я не понимаю, как настроить script, который изменяет html div при изменении значения хеша в URL.

Мне нужен JavaScript script для работы как таковой:

Url: http://foo.com/foo.html содержимое div: <h1>Hello World</h1>

URL: http://foo.com/foo.html#foo содержимое div: <h1>Foo</h1>

Как это работает?

Пожалуйста, помогите! Спасибо.

Ответы

Ответ 1

Вы можете прослушать событие hashchange:

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

Ответ 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>

Пример можно найти здесь: http://jsfiddle.net/KZknm/1/