onpopstate net navegador evento deshabilitar controlar capturar boton atras asp actualizar javascript html ajax navigation

net - javascript history back



AJAX y el botón Atrás del navegador (10)

AJAX no es la mejor solución para la navegación por exactamente la razón que usted describe. El golpe para volver a cargar el encabezado y la barra de navegación es mínimo en comparación con la molestia de romper la interfaz de usuario de navegación del navegador.

Un ejemplo más apropiado de AJAX sería permitirles a los usuarios jugar en la ventana principal mientras pueden navegar a través de una lista de otros contenidos en un panel de navegación. Puede cargar elementos adicionales en el panel de navegación a través de AJAX sin alterar el juego.

Ejecuto un juego basado en navegador en www.darknovagames.com. Recientemente, he estado trabajando en reformatear el sitio con CSS, tratando de obtener todas sus páginas para verificar de acuerdo con el estándar HTML.

He estado jugando con esta idea de tener el menú de navegación en las páginas AJAX de la izquierda (en lugar de llevar al usuario a una página separada cada vez, lo que requiere una recarga del título y la barra de navegación, que casi nunca cambian) y yo Sé que si lo hago, probablemente romperé los botones Adelante / Atrás en el navegador. Supongo que mi pregunta es, ¿debo seguir adelante con AJAX en el sitio y exigir que el usuario use la navegación de los sitios para jugar, o debería abandonar el sitio tal como está actualmente, y usar hipervínculos estándar y elementos para la navegación?

La razón por la que pregunto, supongo, es porque construí un sistema de foros en el sitio, y muchas veces me gustaría vincularlo a un tema en particular dentro de los foros.

También estoy abierto a sugerencias. ¿Existe un modo estándar (preferiblemente sin marcos tradicionales) para hacer que solo el área del cuerpo de la página se recargue, mientras se sigue cambiando la URL para que los usuarios puedan marcar y reenviar / retroceder, etc.? Eso también podría resolver mi problema. Solo estoy pidiendo la mejor solución aquí, no una respuesta a una pregunta específica. ^ _ ^

Gracias


Echa un vistazo a la historia realmente simple . La wiki no se ha actualizado durante 10 meses, pero estaba en Ajax Experience 2008 y vi una presentación de Brian Dillard sobre ella. Él dice que el código 0.8 está en su disco duro. Con suerte, será descargable pronto.


Existen numerosas maneras de resolver este problema utilizando técnicas de funky Javascript, que a menudo implican iframes, pero creo que en esta situación debe preguntarse por qué está usando AJAX. ¿Realmente va a hacer que el sitio sea más fácil de usar para el usuario? Me parece que lo estás usando porque crees que es genial (lo que en sí mismo no siempre es algo malo), no porque de hecho agregue ningún valor a tus visitantes. Desde cualquier sitio web normal, los documentos hipervinculados normales son casi siempre lo correcto para la navegación principal. Es lo que la gente espera y no recomendaría que vayas por ahí rompiendo esas expectativas basadas en alguna tecnología sofisticada.

AJAX es increíble y te permite hacer muchas cosas buenas, cambiar la navegación de un sitio web no es una de ellas.

¡Bien hecho por retomar este problema, hay muchos sitios que siguen adelante con AJAX y ni siquiera piensan en esto!


Me quedaría con hipervínculos simples. El mobiliario de su página no debe representar una gran parte del HTML, por lo que no es una gran ganancia excluyéndolo de las solicitudes de página. Hacer que cada recurso sea direccionable (es decir, una URL para cada bit de contenido que pueda interesar a un usuario) es una característica clave del diseño de la web. Significa que el almacenamiento en caché puede funcionar y significa que los usuarios pueden compartir marcadores. Hace que Google funcione, así como los sitios de marcadores sociales.

Afeitar un par de bytes HTML de los cambios posteriores a la página no vale la pena el esfuerzo, en mi opinión.


Si va a habilitar AJAX, no lo haga a expensas de tener URL accesibles para cada página importante de su sitio. Esta es la columna vertebral de un sitio navegable que las personas pueden usar.

Cuando coloca toda su funcionalidad en las llamadas y devoluciones de llamada de AJAX, básicamente está obligando a los usuarios a acceder a las características y el contenido que desean, lo que está totalmente en contra de la función de la web. La gente confía en la barra de direcciones y el botón Atrás. Si anula todos sus enlaces para que su sitio sea esencialmente una única página que solo se actualice a través de AJAX, estará limitando la capacidad de los usuarios para navegar por su sitio y encontrar lo que necesitan. También evita que los usuarios puedan compartir lo que encuentran (que es parte del punto, ¿no?).

Piensa en el mapa mental de un usuario de tu sitio. Si saben que ingresaron a través de la página de inicio, fueron a buscar algo, luego aterrizaron en una página de juegos y luego comenzaron a jugar un juego en particular, es decir, cuatro unidades de acción distintas que tomó el usuario. Podrían haber hecho algunas otras acciones más pequeñas e insignificantes en cada una de estas páginas, pero estas son las unidades principales. Cuando hacen clic en el botón Atrás, deberían esperar volver por la ruta en la que entraron. Si está cargando todas estas páginas a través de llamadas AJAX, está proporcionando un sitio cuya funcionalidad va en contra de lo que el usuario espera.

Divida su sitio en todas las funciones importantes (es decir, búsqueda, hogar, perfiles, juegos; estará determinado por el contenido de su sitio). En cualquier lugar que enlace a estas páginas, hágalo a través de un enlace normal y una URL estática.

AJAX está bien. Pero el arte de esto es saber cuándo usarlo y cuándo no hacerlo. Si sigues el modelo que he esbozado arriba, tus usuarios lo apreciarán.


Use ajax para las partes de la página que necesita actualizar, no para todo. Para eso deberías usar plantillas.

Cuando aún desee conservar el botón Atrás para sus diversos cambios de estado en la página, combínelos con # achors para modificar la URL (sin forzar al navegador a emitir otro GET).

Por ejemplo, gmail se ve así:

mail.google.com/#inbox/message-1234

todo lo que pasó después del # fue un cambio de estado de página que sucedió a través de ajax. Si presiono Atrás, iré a la bandeja de entrada nuevamente (de nuevo, sin otro buscador GET)


Puede que quieras echarle un vistazo; "Really Simple History" de Brad Neuberg ...




Prueba esta sencilla y ligera lib de PathJS . Permite vincular a los oyentes directamente a los anclajes.

Ejemplo:

Path.map("#/page").to(function(){ alert(''page!''); });