2009-09-10 15 views
16

Gmail używa numeru # po kliknięciu wiadomości w celu rozróżnienia strony (akcja + Ajax). http://mail.google.com/mail/#inbox/1238e709e37a1394Jak Gmail sprawia, że ​​IE Back działa bez odświeżania?

znalazłem: Google using # instead of search? in URL. Why?

W FF lub Chrome można wykorzystać do przodu iz powrotem bez odświeżania między tymi adresami: http://X.com/MyPage.aspx#1 http://X.com/MyPage.aspx#2 http://X.com/MyPage.aspx#3

Ale na IE odświeżania strony i nie robi Zliczanie parametrów po #, gdy wykonywane jest działanie wstecz.

Jak Gmail sprawia, że ​​magia się dzieje?

+1

+1 bardziej ludzie powinni wiedzieć o projektowaniu aplikacji internetowych w tym wzór! – jrharshath

Odpowiedz

13

Mogę dać ci odpowiedź na to pytanie, ponieważ stanąłem przed tym problemem i rozwiązałem ten problem.

Istnieje kilka pojęć, aby zrozumieć najpierw tutaj:

  1. JavaScript nie może zmienić historię przeglądarki bezpośrednio.
  2. , gdy podstawowy adres URL elementu iframe na stronie zmienia się, historia jest aktualizowana. (ale to ma pewne dziwactwa z różnymi przeglądarkami).
  3. adres URL ma część "zakodowaną": np. W adresie URL http://mail.google.com/mail#inbox, #inbox jest częścią zakodowaną. Nazwijmy to "hash". więc http://mail.google.com/mail będzie naszym "podstawowym adresem URL".

Śledzenie historii przez GMail odbywa się głównie za pomocą sztuczek opartych na tym "hash".

Więc jeszcze kilka pojęć:

  1. , gdy adres URL w zmianach paska adresu, historia jest aktualizowany (poprzedni URL przechodzi do historii)
  2. gdy bazowy adres URL zostanie zmieniony, strona jest ponownie załadowana.
  3. , gdy część hash adresu URL zmieni się bez zmiany podstawowego adresu URL, strona nie zostanie ponownie załadowana.

Tak, gdy idziesz z http://mail.google.com/mail#inbox do http://mail.google.com/mail#sent, strona nie dostać odświeżony.

Teraz, jeśli GMail otrzyma powiadomienie o wydarzeniu po zmianie hasza, to Gmail może podjąć działania w oparciu o to. Niestety nie ma zdarzeń DOM, które mogą pomóc nam w przechwyceniu działań związanych z historią. Zamiast tego (jest to część, która pokazuje, jak przezwyciężyłem problem) uruchamiamy nieskończoną pętlę, która sprawdza zmiany w haśle. Jeśli zauważy zmianę, wykryjemy kliknięcie przycisku "wstecz" lub "do przodu" przeglądarki.

Rozwiązując to, stworzyłem poręczne narzędzie: URL parser. Może analizować parametry GET w adresie URL, a także parametry zakodowane w mieszaniu. Daj demo gotowe!

Pozdrawiam!


O tym problem w IE: Nie wiedziałem, że to „hash” oparty rozwiązanie nie działa w IE (biedny stary linux dewelopera).

Ale dla IE można użyć ukrytego elementu iframe i użyć jego właściwości "url affects history" w celu zaimplementowania historii. Wiem, że w tym stwierdzeniu brakuje szczegółów, ale wynika to z mojego własnego braku doświadczenia z IE.

Postaram tego rozwiązania, i śledzić :)

znalazłem mnóstwo linków w Internecie, że zrobić odpowiednie implementacje historii za pomocą iframe/lokalizacja hash. Nie miałem cierpliwości, aby wykopać różnice między interfejsem iframe w różnych przeglądarkach.

Sądzę, że wolałbym jquery plugin. YUI ma także menedżera historii.

Pozdrawiam!

+0

+1 za interesujące informacje, ale nie rozumiem, jak ma to związek z konkretnym problemem z powrotem/do przodu w IE. – Kamarey

+0

Dziękuję za odpowiedź. Ale na IE Jeśli adres URL to: 1. [X.aspx] 2. [X.aspx # A] 3. [X.aspx # B] Następnie naciśnij Wróć: przejdzie do 1 [X.aspx] i Odświeżenia strony , nie 2. W jaki sposób mogę ustawić Back na IE na 2 [X.aspx # A] i bez odświeżania strony? jak w Gmailu. – SirMoreno

+0

W porządku, to jeden z obszarów, których nie zbadałem całkowicie. Ale jest kilka wskazówek, których możesz użyć. Dodaję je do odpowiedzi ... – jrharshath

Powiązane problemy