2009-09-10 11 views
16

Gmail usa # quando si fa clic su una posta per distinguere la pagina (+ azione Ajax). http://mail.google.com/mail/#inbox/1238e709e37a1394In che modo Gmail fa funzionare IE Back senza aggiornare?

ho trovato: Google using # instead of search? in URL. Why?

in FF o Chrome è possibile utilizzare in avanti e indietro senza aggiornamento tra tali URL: http://X.com/MyPage.aspx#1 http://X.com/MyPage.aspx#2 http://X.com/MyPage.aspx#3

Ma su IE nella pagina di aggiornamento e doesn contiamo i parametri dopo # quando viene eseguita un'azione di retromarcia.

Come Gmail fa accadere la magia?

+1

+1 più la gente dovrebbe conoscere il web design applicazione in questo modello! – jrharshath

risposta

13

Posso darti la risposta a questo, perché ho affrontato e risolto questo problema.

ci sono alcuni concetti per capire prima qui:

  1. javascript non può modificare direttamente la cronologia del browser.
  2. ogni volta che l'URL di base di un iframe nella pagina cambia, la cronologia viene aggiornata. (ma questo ha alcune stranezze con diversi browser).
  3. l'url ha una parte "hash": ad esempio, nell'URL http://mail.google.com/mail#inbox, #inbox è la parte dell'hash. Lo chiamiamo "hash". quindi http://mail.google.com/mail sarà il nostro "URL di base".

La cronologia di monitoraggio di GMail viene eseguita principalmente tramite trucchi basati su questo "hash".

Così, un paio di concetti:

  1. quando l'URL nei cambiamenti barra degli indirizzi, la storia viene aggiornato (l'URL precedente va in storia)
  2. quando l'URL di base viene cambiato, il la pagina è ricaricata.
  3. quando la parte di hash dell'URL cambia senza che l'URL di base cambi, la pagina non viene ricaricata.

Così, quando si va http://mail.google.com/mail#inbox-http://mail.google.com/mail#sent, la pagina non ottiene rinfrescata.

Ora, se GMail dovesse ricevere una notifica di evento quando l'hash è cambiato, Gmail potrebbe intraprendere azioni basate su tale. Sfortunatamente, non ci sono eventi DOM che possono aiutarci a catturare le azioni della cronologia. Quindi, invece (questa è la parte che mostra come ho superato il problema), eseguiamo un ciclo infinito che controlla le modifiche all'hash. Se osserva una modifica, rileviamo un clic sul pulsante "indietro" o "avanti" del browser.

Nel risolvere ciò, ho creato uno strumento utile: lo URL parser. Può analizzare i parametri GET nell'URL, nonché i parametri codificati nell'Hash. Dai la demo!

Cheers!


A proposito di questo problema in IE: Non mi rendevo conto che questo 'hash' basato soluzione non funziona su IE (scarso sviluppatore Linux vecchio).

Ma per IE, è possibile utilizzare un iframe nascosto e utilizzare la proprietà "url influisce sulla cronologia" per implementare la cronologia. So che questa affermazione manca di dettagli, ma ciò deriva dalla mia mancanza di esperienza con IE.

Cercherò questa soluzione, e follow-up :)

ho trovato una serie di link su internet, che fanno corrette implementazioni di storia utilizzando iframe/posizione hash. Non ho avuto la pazienza di scavare le differenze tra l'interfaccia iframe su vari browser.

Suppongo che preferirei lo jquery plugin. YUI ha anche un manager della storia.

Cheers!

+0

+1 per informazioni interessanti, ma non capisco come si riferisce al problema specifico con andare indietro/avanti in IE. – Kamarey

+0

Grazie per la risposta. Ma su IE se l'url è: 1. [X.aspx] 2. [X.aspx # A] 3. [X.aspx # B] Quindi premi Indietro: andrà a 1 [X.aspx] e Page Refreshes , non 2. Come posso rendere il Back on IE andare a 2 [X.aspx # A] e senza la pagina Aggiorna? come su Gmail. – SirMoreno

+0

ok, questa è un'area che non ho cercato completamente. Ma ci sono alcuni consigli che puoi usare. Aggiungendoli alla risposta ... – jrharshath

Problemi correlati