javascript - example - location hash substring 1

Detectar cambios en el valor hash de la URL usando JavaScript

Question

Estoy trabajando en una aplicación simple que se basa en una sola página (debido a las restricciones del proyecto) y tiene contenido dinámico. Comprendo bien el contenido dinámico, pero lo que no entiendo es cómo configurar un script que cambie el html de un div cuando cambia el valor de hash en la URL.

Necesito un script de JavaScript para trabajar como tal:

Url: http://foo.com/foo.html contenidos div: <h1>Hello World</h1>

Url: http://foo.com/foo.html#foo div contents: <h1>Foo</h1>

¿Cómo funcionaría esto?

¡Por favor ayuda! Gracias.

Answer 1

Personalmente, usaría sammy que le brinda la flexibilidad de diseñar el hashtag (agregar marcadores de posición y poder leerlos nuevamente). p.ej

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

Un ejemplo se puede encontrar aquí: http://jsfiddle.net/KZknm/1/

Answer 2

Puedes escuchar el evento hashchange :

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