2010-08-11 9 views
8

Parece que Gmail tiene una manera ingeniosa de manejar los botones atrás/adelante en una aplicación JS enriquecida.¿Cómo maneja Gmail hacia atrás/adelante en JavaScript enriquecido?

En mi organización probamos el complemento de historial jQuery. El plugin básicamente ejecuta una función cada 100ms que analiza la URL y prueba si ha cambiado. El historial es rastreado por los anclajes HTTP, y si el anclaje ha cambiado, el complemento llama a una devolución de llamada especificada por el usuario, pasando el nuevo anclaje, para que la página pueda realizar un comportamiento personalizado para cargar el nuevo contenido.

Mi organización determinó que el complemento del historial jQuery no era de calidad de producción. No los culpo por ser honestos, porque realmente no quieren obligar a los navegadores de sus usuarios a ejecutar una función cada 100 ms. Además, hizo que el código JS fuera casi imposible de depurar, porque hacer clic en "Interrumpir Siguiente" en Firebug o depurador JS similar, siempre atraparía el evento del historial jQuery, y ningún otro evento vería.

Así que se dio por vencido en este momento en la implementación de la funcionalidad de retroceso/avance en el navegador. Sin embargo, recientemente noté que Gmail implementa esto bastante bien. También usa el valor de anclaje de HTTP, pero presioné "Romper en el siguiente" y Gmail no ejecuta ningún tipo de función cada 100 ms. ¿Cómo logra Gmail implementar este comportamiento de retroceso/avance?

+1

posible duplicado de [¿Cómo Gmail hace que IE vuelva a funcionar sin actualizar?] (Http://stackoverflow.com/questions/1404434/how-gmail-makes-ie-back-work-without-refresh) –

Respuesta

6

Tal vez están hablando sobre el plugin jQuery historia aquí: http://www.balupton.com/projects/jquery-history que se ha utilizado en el hombre y sitios de calidad de producción; uno de mis favoritos es http://wbhomes.com.au/

Si es así, se utiliza una prueba de 200 ms para older generation browsers que no apliquen el evento onhashchange forma nativa. Sin ese evento implementado de forma nativa, tiene que solucionar su funcionalidad mediante el uso de un cambio de intervalo, simplemente no hay otra forma que yo sepa. Afortunadamente, las versiones más recientes de todos los principales navegadores ahora admiten el evento onhashchange de forma nativa, por lo que ya no es necesario.

Pero, vamos, vamos a ver qué hace esa comprobación de intervalos de 200ms. Si están en IE6 o 7, comprobará el estado de un iframe (como en esos navegadores, se requiere un iframe para emular los botones de retroceso y avance, mientras que para otros buscadores no se requiere un iframe). Si están usando otro navegador más antiguo que no es IE, entonces puede simplemente usar location.getHash() en el cheque (sin un iframe como se explicó anteriormente). Ambos tipos de controles están diseñados para ser extremadamente rápidos y lo más mínimos posible, reduciendo casi por completo los gastos generales necesarios. Se trata de lo que el navegador realmente está dispuesto a dejar que hagas, y tratando de hacerlo utilizando el código menos intensivo posible.

Nota: Antes de la versión v1.4.2 final (12 de agosto de 2010) del historial de jQuery, los únicos navegadores reconocidos que admitían onhashchange de forma nativa eran IE8 y superiores. Esto se ha resuelto en todas las versiones más nuevas del proyecto de historia jQuery.

+0

La actualización se ha publicado para jQuery History, por lo que ya no se utiliza la verificación de intervalos para la nueva ola de navegadores. Puede ver el nuevo código fuente para el control de soporte nativo aquí: http://github.com/balupton/jquery-history/blob/133790d9884b7d317b777220ba975c99e9c11de6/scripts/resources/jquery.history.js#L304 Si tiene cualquier otro inquietudes o comentarios sobre el historial de jQuery sería fantástico si pudieras informarnos en la página de soporte aquí: http://getsatisfaction.com/balupton/products/balupton_jquery_history – balupton

1

Es posible que desee comprobar esta pregunta anterior:

Is there a way to catch the back button event in javascript?

Parece que la forma en que se ha hecho en jQuery es la única manera de hacerlo, porque eso es lo que YUI está haciendo demasiado:

http://developer.yahoo.com/yui/history/

+0

Aquí hay algunos información de contexto sobre la creación del Administrador de historial del navegador YUI: http://yuiblog.com/blog/2007/02/21/browser-history-manager/. – ptrin

Cuestiones relacionadas