Jaka przeglądarka ?

Nie jest dla nikogo tajemnicą, że różne przeglądarki w różny sposób interpretują kod strony internetowej. O ile w przypadku używania "czystego" HTML-a problem jest niezauważalny, to już zastosowania JavaScript, arkuszy stylów czy też DHTML-u spędzają sen z powiek wielu webmasterom. Jeżeli dodamy do tego fakt, że starsze przeglądarki nie obsługują skryptów JS i arkuszy CSS to szybko okazuje się, że na prostej stronie musimy się nieźle nagimnastykować, aby osiagnąć pożądany efekt.
Tak więc robimy oddzielne strony dla starszych przegladarek, oddzielne dla Netscape Navigatora i oddzielne dla Internet Explorera. Robimy także strony, w których jedne fragmenty kodu przeznaczone są dla NN a inne dla IE. W każdym z tych przypadków musimy wiedzieć jaką przeglądarkę posiada użytkownik i właśnie ten temat chciałbym poruszyć.

Jest kilka sposobów rozpoznawania typu i wersji przegladarki. Jedne z nich wykorzystują informację o obiekcie navigator, inne natomiast korzystają z obiektów specyficznych dla określonej przeglądarki. Spróbujmy przyjrzeć się im bliżej

Obiekt "navigator"
Obiekt navigator jest jednym ze zbioru obiektów wbudowanych JavaScript, który pozwala na dostęp do informacji dotyczących przeglądarki. Obiekt ten posiada zestaw właściwości, z których niektóre mogą okazać się nam niezwykle przydatne. Są to ( dla JavaScript 1.0):
appName - nazwa aplikacji w postaci łańcucha znaków (np. Netscape);
appVersion - zapisana w postaci łańcucha znaków informacja o wersji używanej przeglądarki. Poza numerem wersji możemy także odczytać platformę systemową i wersję narodową. Format łąńcucha jest nastepujący wersja(platforma,kraj) np. 4.0(winNT,I);
appCodeName - nazwa kodowa przeglądarki (np. Mozilla);
userAgent - łańcuch znaków określający nazwę oraz wersję przeglądarki, jaki przeglądarka wysyła w nagłówku prośby HTTP;
Znamy już podstawowe włąściwości obiektu navigator, które mogą nam być potrzebne. Zastanówmy się więc jak i w jakim celu z tych informacji skorzystać.

Jednym z powodów dla których chcemy wiedzieć jaką przeglądarką dysponuje użytkownik, jest chęć zastosowania skryptu, którego polecenia mogą nie być poprawnie wykonane przez starsze wersje przegladarek. Pozwoli to uniknąć komunikatów o błędach, które skutecznie zniechęcają do oglądania takich stron. Umieśćmy więc następujący fragment kodu w nagłówku dokumentu HTML:



Cóż takiego zrobiliśmy ? Pierwszy wiersz to znacznik rozpoczęcia skryptu, drugi - to początek komentarza, który dla przeglądarek nie obsługujących JavaScript-u uczyni ten fragment kodu niewidocznym.
W następnym wierszu do zmiennej klientName przypisujemy wartość właściwości appName obiektu navigator. Do kolejnej zmiennej klientVer liczbę numeru wersji przekonwertowaną funkcją parseInt z wartości właściwości appVersion obiektu navigator. Obydwie zmienne posłużą nam w kolejnych wierszach, w których zastosowano instrukcje warunkową if...else.
Najpierw sprawdzamy czy przeglądarka to Netscape w wersji 3.0 lub nowszej. Jeżeli tak - to kolejnej zmiennej wersja przypisujemy wartość true (prawda). Jeżeli nie jest to Netscape, to sprawdzamy, czy jest to Microsoft Internet Explorer w wersji 4.0 lub wyższej. W takim przypadku zmiennej wersja także przypisujemy wartość true. W pozostałych przypadkach zmiennej wersja przypisujemy wartość false (fałsz).

Zastanawiacie się dlaczego akurat "dobre" wersje to IE4.0+ oraz NN3.0+ ? No cóż, tak to sobie wymyśliłem. Powód może być taki, że składnia kodu strony jest poprawnie interpretowana przez właśnie te przeglądarki. Każdy jednak może oczywiście sam określić, której przeglądarce nadać status "dobra" (zmienna wersja= true), a której status "zła" (wesja=false). Może się także okazać, że potrzebujemy rozróżnić obydwie przeglądarki (np. przy "zabawie" z warstwami). Możemy wtedy do zmiennej wersja wstawić łańcuch znaków, np. "IE", "NN" lub tp., możliwości jest bardzo wiele

Detekcja poprzez właściwość.
Ta metoda jest powszechnie stosowana w przypadku tworzenia stron w DHTML. Document Object Model czyli obiektowy model dokumentu pozwala na dostęp do elementów dokumentu poprzez skrypty JS. Rzecz w tym, że w Netscape Navigatorze możliwa jest kontrola tych elementów, które są stworzone na warstwach (znacznik LAYER lub umiejscawianie CSS). W przypadku Internet Explorera możliwy jest dostęp do wszystkich elementów rozpoznawanych przez IE. Nie wdając się w szczegóły, można stwierdzić, że właściwość layers obiektu document wystepuje tylko w Netscape Navigatorze, natomiast właściwość all obiektu document jest dostępna tylko w Internet Explorerze.

Spróbujmy wykorzystać podane wyżej różnice właściwości przeglądarek i posłużmy się poniższym kodem:


Co powyższy fragment skryptu oznacza ? Trzecia i czwarta linia to ustawienie wartości początkowych dla zmiennych nn4 oraz ie4. W następnej linii sprawdzamy czy obiekt document posiada właściwość layers. Jeżeli posiada to do zmiennej nn4 przypisujemy wartość true (zmienna ie4 bedzie miała wartość false). Jeżeli warunek nie jest spełniony, to sprawdzany jest kolejny warunek - czy obiekt document zawiera właściwość all. W przypadku pozytywnego testowania warunku, zmiennej ie4 nadawana jest wartość true (zmienna nn4=false).
Na koniec warto wspomnieć, że zapis instrukcji warunkowych podanych w przykładzie wyżej można uprościć. Oto uproszczony zapis:


W powyższym zapisie, zmiennym nn4 i ie4 przypisywana jest wartość true lub false w zależności od tego, czy warunki w nawiasach są prawdziwe.

Wiemy już jak wykryć rodzaj przeglądarki, jak natomiast wykorzystać tą informację, zależy tylko i wyłącznie od inwencji twórcy strony. Niewątpliwie jednak nie warto z powyższych przykładów korzystać tylko po to, aby na budowanej stronie poinformować odwiedzającego jakiej przegladarki używa.