HTML5 pushState – no más location.hash!

HTML5_sticker

Por mucho tiempo la forma de manejar el historial y ofrecer la posibilidad de agregar a favoritos aplicaciones AJAX fue utilizando location.hash. Ahora con HTML5 podemos reemplazar location.hash por una mejor solucion: pushState

Pushstate es la forma de cambiar la URL por javascript sin recargar la página. Se utiliza de la siguiente forma:

window.history.pushState(data, "Titulo", "/nuevo-recurso");

  • Primer argumento (Object o String): Datos almacenados que pueden ser utilizados en el evento window.onpopstate; activado cuando se usa un pushState() oreplaceState().
  • Segundo argumento (String): Modifica el titulo del nuevo estado. El título (ó <title>) del documento no cambia. Es una descripción para el manejo de historial.
  • Tercer argumento (String): Ruta al nuevo recurso, por razones de seguridad no se modifica el dominio.

Para dar  soporte a los botones de “atrás” y “adelante” y evitar la recarga de la página se puede utilizar el evento windows.onpopstate

Les dejo un ejemplo de funcionamiento.

<!DOCTYPE HTML>
<title>Página 5</title>
<p>Estas en la página<span id="coord">5</span>.</p>
<p>
 <a href="?x=6" onclick="go(1); return false;">Ir a página 6</a> o
 <a href="?x=4" onclick="go(-1); return false;">Volver a página 4</a>?
</p>
<script>
 var currentPage = 5; // Arrancamos desde la pagina 5

 function go(d) {
   setupPage(currentPage + d);
   history.pushState(currentPage, document.title, '?x=' + currentPage);
 }
 onpopstate = function(event) {
   setupPage(event.state);
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Página ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = '?x=' + (currentPage+1);
   document.links[0].textContent = 'Ir a página ' + (currentPage+1);
   document.links[1].href = '?x=' + (currentPage-1);
   document.links[1].textContent = 'Volver a página ' + (currentPage-1);
 }
</script>

Documentación de la W3G: http://www.w3.org/TR/html5/history.html

[Facebook] [Google] [LinkedIn] [Twitter] [Windows Live] [Email]
Posted in HTML5 Tagged with: , ,
One comment on “HTML5 pushState – no más location.hash!
  1. Marta says:

    Hola,
    Tengo qսe reconocer es lla primera veez que he entrado el blog
    y quiero deciг que me resulta interesante y segurɑmente
    me teոdras mas a menudo por estos lares.
    😉

Leave a Reply

Your email address will not be published. Required fields are marked *

*

ACERCA DE…

Soy desarrollador, estudiante de ingeniería en informática en UADE, trabajo como TE en el equipo de nuevas tecnologías de Microsoft Argentina, Chile y Uruguay.

Me pueden encontrar en Twitter (@AleBanzas), Facebook (/AleBanzas), o LinkedIn (/in/AleBanzas).