Comunidad de diseño web y desarrollo en internet

Cambiar la URL sin recargar con HTML5 / PushState();

Hace tiempo el hash de la url era el único método para que las aplicaciones AJAX y Flash soportaran la interacción de historial, tu sabes, el botón "Atras" y "Adelante" del navegador. Personalmente utilizo mucho el hash en mis aplicaciones, por eso hace tiempo cree un tip sobre el uso del hash aquí en cristalab. Es tiempo de actualizar..

El hash es historia. ¡Hola pushState!


HTML5 incluyó pushState(); un método del objecto window.history de javascript que se encarga de cambiar directamente la url actual del navegador sin necesidad de refrescar la página. Por razones de seguridad sólo podrás cambiar el PATH del dominio y no la URL completa. La manera de usar este método es el siguiente..

Código :

window.history.pushState(data, "Titulo", "nueva_url.html");


  • Primer argumento (Object o String): Datos almacenados que podrán ser recogidos con el evento window.onpopstate; activado cuando se usa un pushState() o replaceState().
  • Segundo argumento (String): Asigna un título a la nueva URL. El título (ó <title>) del documento no cambiará. Es más una descripción para el manejo de historial que otra cosa.
  • Tercer argumento (String): La nueva ruta a mostrár en el documento.

Usos, ventajas e información


Con este método se puede mejorar la usabilidad, seo y entre otras cosas el manejo de historial en las aplicaciones web. Ese famoso problema de la URL al utilizar ajax, ese que te impedía compartir la página ó agregar a favoritos puede términar.

Por otro lado, este método aún no es soportado por todos los navegadores. Actualmente es soportado por la última versión de Chrome y Safari. En la versión 4 de Firefox ya vendrá implementado.

¿Entonces aún no lo puedo útilizar? Tú decides. Actualmente Facebook y Flickr ya utilizan esta característica, aunque en los navegadores no soportados utilizan una versión alternativa con Hash.

Muy pronto dejaremos de necesitar librerías alternativas para lograr este detalle.


Recuerda probarlo con un navegador que soporte la característica. Si no, simplemente verás un hash aparecer.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate