Pobierz wersję IE z User-Agent
var ie = 0;
try { ie = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ )[ 2 ]; }
catch(e){}
Jak to działa: Łańcuch klienta użytkownika dla wszystkich wersji IE zawiera fragment „MSIE Space Version ” lub „Trident other-text rv space-or-colon version ”. Wiedząc o tym, pobieramy numer wersji zString.match()
wyrażenia regularnego. try-catch
Blok służy do skrócenia kodu, w przeciwnym razie musielibyśmy testować granice tablicy dla przeglądarek nie-IE.
Uwaga: klienta użytkownika można sfałszować lub pominąć, czasem niezamierzenie, jeśli użytkownik ustawił przeglądarkę w „trybie zgodności”. Chociaż w praktyce nie wydaje się to dużym problemem.
Pobierz wersję IE bez klienta użytkownika
var d = document, w = window;
var ie = ( !!w.MSInputMethodContext ? 11 : !d.all ? 99 : w.atob ? 10 :
d.addEventListener ? 9 : d.querySelector ? 8 : w.XMLHttpRequest ? 7 :
d.compatMode ? 6 : w.attachEvent ? 5 : 1 );
Jak to działa: Każda wersja IE dodaje obsługę dodatkowych funkcji, których nie znaleziono w poprzednich wersjach. Możemy więc przetestować funkcje w sposób odgórny. Jednak dla zwięzłości zastosowano tutaj sekwencję trójskładnikową , if-then
a switch
instrukcje równie dobrze by działały. Zmienna ie
jest ustawiona na liczbę całkowitą 5-11 lub 1 dla starszych lub 99 dla nowszych / nie-IE. Możesz ustawić go na 0, jeśli chcesz dokładnie przetestować IE 1-11.
Uwaga: Wykrywanie obiektów może się zepsuć, jeśli Twój kod jest uruchamiany na stronie ze skryptami innych firm, które dodają polifill dla takich rzeczydocument.addEventListener
. W takich sytuacjach najlepszym rozwiązaniem jest klient użytkownika.
Wykryj, czy przeglądarka jest nowoczesna
Jeśli interesuje Cię tylko to, czy przeglądarka obsługuje większość standardów HTML 5 i CSS 3, możesz rozsądnie założyć, że głównym problemem są aplikacje IE 8 i niższe. Testowanie window.getComputedStyle
daje również całkiem dobrą mieszankę nowoczesnych przeglądarek (IE 9, FF 4, Chrome 11, Safari 5, Opera 11.5). IE 9 znacznie poprawia obsługę standardów, ale natywna animacja CSS wymaga IE 10.
var isModernBrowser = ( !document.all || ( document.all && document.addEventListener ) );