Różne prze­glą­darki w różny spo­sób zarzą­dzają histo­rią. Fire­fox domyśl­nie prze­cho­wuje ją przez 90 dni, Opera i IE około 20–30 a Chrome w nie­skoń­czo­ność. Czy twoja histo­ria prze­glą­darki jest bez­pieczna? Nie­stety nie do końca. Czy może ją pod­glą­dać twórca strony, na którą wcho­dzisz? W pew­nym sen­sie tak. Dzi­siaj przed­sta­wię spo­sób w jaki spo­sób spraw­dzić czy użyt­kow­nik odwie­dzał jakąś stronę.

Spo­sób działania

Nie da się(a przy­naj­mniej nie w takiej postaci jaką dzi­siaj pokażę) prze­glą­dać całej histo­rii. Jest jed­nak spo­sób aby wycią­gnąć infor­ma­cję o tym czy użyt­kow­nik odwie­dził kon­kretny adres www. Wszystko dla­tego, że CSS posiada pseu­do­klasę :visi­ted dzięki któ­rej można okre­ślij inne osty­lo­wa­nie dla lin­ków odwie­dzo­nych. Przy uży­ciu Java­Script w łatwy spo­sób można spraw­dzić, które linki mają inny styl i wysłać o nich infor­ma­cję na serwer.

Imple­men­ta­cja

Są dwie tech­niki, dzięki któ­rym możemy wysłać infor­ma­cję na ser­wer. Pierwsza(moim zda­niem gor­sza) w dużym skró­cie wygląda tak:

<a href="http://google.pl" class="google">Google!</a>

a.google:visited{background:url('http://example.com?sitevisited=google'); }

Jeśli link jest odwie­dzony zosta­nie wysłane zapy­ta­nie o tło do ser­wera example.com. Ser­wer wcale nie musi zwra­cać obrazka. Wystar­czy, że doda użyt­kow­nika do swo­jej bazy danych.

Druga — znacz­nie cie­kaw­sza — wyko­rzy­stuje JS, rów­nież działa w tle i także jest prak­tycz­nie nie widoczna dla użytkownika(trzeba zaj­rzeć do kodu). Co wię­cej nie musimy okre­ślać oddziel­nych klas CSS dla każ­dego adresu. Przejdzmy do kodo­wa­nia. Przede wszyst­kim potrze­bu­jemy kon­te­ner na linki oraz styl dla odno­śni­ków odwiedzonych.

  #tempLinkContainer a:visited{display:none;}

Uży­wam display a nie np. color ponie­waż poszcze­gólne prze­glą­darki róż­nie inter­pre­tują kolory — Opera prze­cho­wuje je w postaci hek­sa­de­cy­mal­nej #RRB­BGG, a Fire­fox w sys­te­mie dzi­sięt­nym rgb(R,G,B). Display jest jed­no­lity więc nie będzie z nim pro­ble­mów. Czas na rdzeń skryptu JavaScript.

function checkLink(url) {
  var myLink = document.createElement('a');
  myLink.href= url;
  var container = document.getElementById('tempLinkContainer');
  container.appendChild(myLink);
  if(myLink.currentStyle)
    var visited = myLink.currentStyle.display=='none';
  else
    var visited = document.defaultView.getComputedStyle(myLink, null).display=='none';
  container.removeChild(myLink);
  return visited;
}

Funk­cja jako para­metr przyj­muje adres url strony którą chcemy spraw­dzić. Naj­pierw two­rzony jest ele­ment a i uzu­peł­niany jest jego para­metr href. Następ­nie ten ele­ment jest umiesz­czany w naszym ele­men­cie div. W ten spo­sób link otrzy­muje odpo­wied­nie osty­lo­wa­nie jeśli jest odwie­dzony. Jedyne co nam pozo­staje to spraw­dze­nie para­me­tru display. W tym celu należy pobrać styl obli­czany naszego linku. Nie­stety IE(wraz z Operą) obsłu­gują to troszke ina­czej niż Fire­fox, Safari i inne prze­glą­darki — stąd ta instruk­cja warun­kowa. Wynik jest zapi­sy­wany do zmien­nej visi­ted, link nisz­czony i war­tość na końcu zwra­cana. Efekt można zoba­czyć tutaj. Zauważ, że linki odwie­dzone otrzy­mują klasę visited(ustawienie koloru na zie­lony). Żadna pseu­do­klasa :visi­ted, nie defi­niuje zie­lo­nego koloru — jest to zasługa JavaScript.

Oczy­wi­ście ta tech­nika nie jest ide­alna — roz­róż­nia np. linki typu:

• http://httpd.apache.org/docs/2.0/mod/core.html#errorlog
• http://httpd.apache.org/docs/2.0/mod/core.html
• http://httpd.apache.org

Jed­nak łatwo domy­śleć się, że więk­szość użyt­kow­ni­ków odwie­dza­ją­cych np. Facebook.com naj­pierw uru­cha­mia jego stronę główną. Tech­nikę tą można użyć nie tylko do szpie­go­wa­nia użyt­kow­ni­ków. Można dzięki niej uatrak­cyj­nić stronę inter­ne­tową ser­wu­jąc różne rze­czy w zależ­no­ści od histo­rii np. można umie­ścić infor­ma­cję na temat pro­filu na Facebook.com zamiast na nasza-klasa.pl jeśli użyt­kow­nik nie odwie­dza naszej-klasy a odzwie­dza facebooka.

W week­end pla­nuję przy­siąść do popra­wek mojego blogu więc praw­do­po­dob­nie spró­buję dodać kilka cie­ka­wych opcji.