2009-09-10 5 views
16

Gmail usa # cuando hace clic en un correo para distinguir la página (+ acción Ajax). http://mail.google.com/mail/#inbox/1238e709e37a1394¿Cómo Gmail hace que IE vuelva a funcionar sin actualizar?

que encontré: Google using # instead of search? in URL. Why?

En FF o Chrome puede utilizar Adelante y atrás sin actualización entre esos URL: http://X.com/MyPage.aspx#1 http://X.com/MyPage.aspx#2 http://X.com/MyPage.aspx#3

Pero en IE la página de actualización y Doesn cuente los parametros después de # cuando se realiza una acción de retroceso.

¿Cómo Gmail hace que la magia suceda?

+1

1 más la gente debe saber sobre el diseño de aplicación web en este modelo! – jrharshath

Respuesta

13

Puedo darle la respuesta a esto, porque me he enfrentado y he resuelto este problema.

Hay algunos conceptos para entender aquí primero:

  1. Javascript no puede alterar el historial del navegador directamente.
  2. cuando la URL base de un iframe en la página cambia, el historial se actualiza. (pero esto tiene algunos caprichos con diferentes navegadores).
  3. la url tiene una parte "hash": por ejemplo, en la URL http://mail.google.com/mail#inbox, #inbox es la parte hash. Vamos a llamarlo el "hash". entonces http://mail.google.com/mail será nuestra "URL base".

El historial de seguimiento de GMail se hace principalmente utilizando trucos basados ​​en este "hash".

Así, unos más conceptos:

  1. cuando la dirección URL en la barra de direcciones, la historia se actualiza (la URL anterior entra en la historia)
  2. cuando la URL base se cambia, la la pagina esta recargada
  3. cuando la parte hash de la URL cambia sin que la URL base cambie, la página no se vuelve a cargar.

Por lo tanto, cuando se va http://mail.google.com/mail#inbox-http://mail.google.com/mail#sent, la página no refrescarse.

Ahora, si GMail recibiera una notificación de evento cuando cambiara el hash, entonces gmail podría tomar medidas basadas en eso. Lamentablemente, no hay eventos DOM que puedan ayudarnos a capturar acciones de historial. Entonces, en cambio (esta es la parte que muestra cómo superé el problema), ejecutamos un ciclo infinito que busca cambios en el hash. Si observa un cambio, detectamos un clic en el botón "volver" o "avanzar" del navegador.

Al resolver esto, hice una herramienta práctica: el URL parser. Puede analizar los parámetros GET en la URL, así como los parámetros codificados en la Hash. ¡Dale una oportunidad a la demostración!

¡Salud!


Sobre este problema en IE: No me di cuenta que este hash 'solución basada no funciona en IE (mala desarrollador de Linux de edad).

Pero para IE, puede utilizar un iframe oculto y usar su propiedad "url affect history" para implementar el historial. Sé que esta afirmación carece de detalles, pero eso se debe a mi propia falta de experiencia con IE.

voy a intentar esta solución, y hacer un seguimiento :)

me encontré con una gran cantidad de enlaces en internet, que lo hacen las implementaciones propias de la historia usando iframes/ubicación de hash. No tuve la paciencia para desenterrar las diferencias entre la interfaz iframe en varios navegadores.

Supongo que preferiría el jquery plugin. YUI también tiene un gerente de historia.

¡Salud!

+0

+1 para obtener información interesante, pero no entiendo cómo se relaciona con el problema específico de ir atrás/adelante en IE. – Kamarey

+0

Gracias por la respuesta. Pero en IE Si la url es: 1. [X.aspx] 2. [X.aspx # A] 3. [X.aspx # B] Luego presione Atrás: irá a 1 [X.aspx] y Actualizaciones de página , no 2. ¿Cómo puedo hacer que Back on IE vaya a 2 [X.aspx # A] y sin la actualización de página? como en Gmail. – SirMoreno

+0

bien, esa es un área que no investigué por completo. Pero hay algunos consejos que puede usar. Agregándolos a la respuesta ... – jrharshath

Cuestiones relacionadas