Código

Cómo administrar el botón Atrás con JavaScript

Un problema importante con las aplicaciones basadas en JavaScript es que rompen el botón Atrás. Si actualiza contenido en la página con JavaScript en lugar de cargar una página nueva desde el servidor, no se realiza ninguna entrada en el historial del navegador; así que cuando el usuario hace clic en Atrás, esperando regresar al estado anterior, terminan en el sitio anterior.

Arrastrar y soltar es una forma excelente para que los usuarios interactúen con sus aplicaciones web. Pero las ganancias de usabilidad se perderán si, después de pasar tiempo moviéndose a través de su aplicación, los usuarios hacen clic en el botón Atrás esperando regresar a una página y en su lugar vuelven a su pantalla de Inicio. En este artículo "¡Hola! El autor de HTML5 & CSS3, Rob Crowther, le muestra cómo usar la API de historial de HTML5 para evitar ese destino.

El problema se puede demostrar de manera simple. Todo lo que necesita es una función que actualice la página en respuesta a la actividad del usuario: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

y un poco de margen de ganancia: 

Click Me
Recorded 0 clicks

En la vida real, su página web estaría haciendo algo más complicado, como obtener nuevo contenido del servidor a través de AJAX, pero una simple actualización es suficiente para demostrar el concepto. Veamos qué sucede cuando el usuario visita la página.

  1. El usuario comienza en su página de inicio y decide visitar la asombrosa aplicación Click Me de la que han oído hablar.
  2. Teclean la URL o siguen un enlace de un correo electrónico para acceder a la página Haga clic en Me.
  3. Después de unos segundos de interacción agradable, el estado de la página ha cambiado varias veces.
  4. Pero cuando el usuario hace clic en el botón Atrás en el navegador, descubre que en lugar de volver al estado de una página anterior, se desplazan a su página de inicio.

La función doclick () se puede actualizar para aprovechar la API de historial. Cada vez que se actualice la página, también se establecerá la ubicación.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. El usuario llega a la página Click Me como antes.
  2. Tenga en cuenta que ahora la URL se actualiza después de cada clic; al final aparece "#".
  3. Al hacer clic en el botón Atrás, la ubicación vuelve al n. ° 2, lo que demuestra que los estados de la página se han agregado correctamente al historial. Pero tenga en cuenta que al hacer clic en el botón Atrás no se devuelve automáticamente la página a su estado anterior.

Actualizando el estado de la página

Actualizar el historial es solo parte del problema; también necesita poder actualizar el estado de la página para que coincida con el estado en el historial.

Debido a que usted es el que está administrando el historial, depende de usted administrar el estado de la página. Para actualizar su página en respuesta a la modificación de location.hash, puede escuchar el evento hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

La función doclick () ahora solo es responsable de actualizar la variable times y cambiar el hash. El evento hashchange está en el objeto ventana; cuando tiene lugar, compruebas que existe el hash. En una aplicación real, también debería verificar que tenga un valor válido. A continuación, establece el valor de los tiempos para que sea el número en el hash. Finalmente, actualiza el documento para reflejar el estado correcto de la página. Veamos este nuevo código:

  1. Como antes, el hash en la URL se actualiza a medida que el usuario hace clic.
  2. Pero ahora, cuando se hace clic en el botón Atrás, la función onhashchange se activa y el estado de la página se restablece para que coincida con la URL.

Usando location.hash

La propiedad location.hash y el evento hashchange asociado son útiles si desea etiquetar vistas particulares de su aplicación y permitir que el usuario navegue entre ellas. Google Mail utiliza este enfoque permitiéndole navegar entre su bandeja de entrada (#inbox), contactos (#contactos) y otras vistas. Si tiene una cuenta de Gmail, mire lo que sucede con la URL mientras navega a varias páginas diferentes y luego haz clic atrás.

Pero en lo que respecta a la información de estado, el hash solo le permite almacenar una cadena. Podrías codificar un objeto más complejo, pero la URL se volvería larga y difícil de manejar y no sería memorable para tus usuarios. Si necesita almacenar información más compleja como parte del historial, un mejor enfoque sería usar el hash como clave para extraer más información de estado de alguna tienda. Aunque podría aplicar su propio enfoque a esto, HTML5 ha proporcionado una API para que lo haga por usted a través del método history.pushState () y el evento popstate. Estos métodos le permiten guardar y volver a cargar un objeto complejo.

Resumen

Has aprendido que administrar el historial del navegador te permite hacer que el botón Atrás se comporte de una manera más sensata en el contexto de tu aplicación, mientras que la API de microdatos te da acceso a información semántica estructurada en los contenidos de la página.

¿Qué usos prevé para esta técnica? ¿Has desarrollado un método diferente? Háganos saber en los comentarios.

Imagen / miniatura destacada, volver imagen a través de Shutterstock.

aplicaciones javascript botón de retroceso hola html5 y css historia api rob crowther