Usando el botón ATRÁS para volver al estado anterior de la página

Question

Estoy probando una nueva funcionalidad para mi sitio web.Quiero hacer una navegación sencilla por " mostrar/ocultar <div> elementos.

Por ejemplo, cuando un usuario hace clic en un botón de "detalles" en algunos productos, la quiero para ocultar la principal <div> y mostrar la <div> contiene los detalles del producto.

El problema es que para volver a la anterior "página", tengo que deshacer todo de la pantalla/visibilidad de los cambios de estilo, que está bien si el usuario hace clic en el botón "cerrar" en el recién inaugurado <div>.Pero la mayoría de los usuarios se pulsa el botón ATRÁS.

Es allí una manera de hacer que el botón ATRÁS volver a la anterior "estado" de la página, es decir, deshacer la visibilidad de la pantalla cambia?

Gracias.

Answer 1

para responder a la pregunta de su título (que es lo que estaba buscando)

  

Con el botón BACK para volver al estado anterior de la página

y desde el enlace de @ respuesta de reach4thelasers, hay que establecer un temporizador y comprobar una y otra vez el ancla actual:

//On load page, init the timer which check if the there are anchor changes each 300 ms  
$().ready(function(){  
   setInterval("checkAnchor()", 300);  
});

porque no hay devolución de llamada Javascript activado cuando se pulsa el botón BACK y sólo se cambia el ancla ...

-

Por cierto, el patrón que está hablando ahora se conoce como Interfaz de Página única

Answer 2

Sí. Lo que usted está buscando se llama AJAX historial del navegador .

Hay algunas implementaciones abiertas por ahí, como RSH , así como plugins / módulos para marcos como jQuery y YUI .

Answer 3

Usted necesita para añadir un anclaje a la URL cada vez que se realiza un cambio

www.site.com/page.html#anchor1

Esto permitirá que el navegador para mantener las páginas de su historia.He implementado en mi actual sitio después de seguir este tutorial, que funciona muy bien y da una buena comprensión de lo que usted necesita hacer:

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Su ejemplo en los comentarios no funciona, porque esto funciona así:

1. Carga De Página

2. Cambiado la página, Agregar Ancla de URL (botón atrás le lleva de nuevo a 1)

3. Cambiado la página, Ancla Cambiado (botón atrás botón que lleva de nuevo a 2)

4. Cambiado la página, Ancla Cambiado (botón atrás botón que lleva de nuevo a 3)

   ....y así sucesivamente y así sucesivamente..

Answer 4

Si lo hay, que suena como una cosa bastante mal hacer desde una perspectiva UX. ¿Por qué no se diseña un botón de "atrás" en su aplicación y el uso del diseño para que sea evidente para el usuario que debe utilizar el botón de regreso de su aplicación en lugar del navegador.

Por "uso del diseño", me refiero a que su aplicación se parece a una interfaz de usuario auto-suficiente en el interior del navegador, por lo que el ojo del usuario se mantiene dentro de su página, y no hacia arriba en el navegador de cromo, cuando están buscando para los controles para interactuar con la aplicación.

Answer 5

Usted puede hacer esto con las anclas, que es como se hace en una gran cantidad de aplicaciones flash, u otras aplicaciones que no pasan de una página a otra. Facebook utiliza esta técnica bastante liberalmente. Cada vez que el usuario hace clic en un enlace que debe ir en su historia, cambie el ancla en la página.

Así que decir que mi enlace de la página de inicio es:

http://www.mysite.com/#homepage

En el enlace que funciona su magia JavaScript, haga lo siguiente:

<a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>

Esto enviará al usuario http://www.mysite.com/#otherpage donde al hacer clic en el botón Atrás volverá a http://www.mysite.com/#homepage . A continuación, sólo tiene que leer los anclajes con

window.location.hash

para averiguar qué página se supone que debes estar en.

Answer 6

Tome un vistazo a este tutorial basado en un ItsNat framework de desarrollo web Java centrado en los sitios web de una sola página de la interfaz