자바스크립트 navigator를 이용한 IE 버전 알아내기

[ 브라우저 체크 ]

var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("chrome") != -1) return 'Chrome'; 
if (agt.indexOf("opera") != -1) return 'Opera'; 
if (agt.indexOf("staroffice") != -1) return 'Star Office'; 
if (agt.indexOf("webtv") != -1) return 'WebTV'; 
if (agt.indexOf("beonex") != -1) return 'Beonex'; 
if (agt.indexOf("chimera") != -1) return 'Chimera'; 
if (agt.indexOf("netpositive") != -1) return 'NetPositive'; 
if (agt.indexOf("phoenix") != -1) return 'Phoenix'; 
if (agt.indexOf("firefox") != -1) return 'Firefox'; 
if (agt.indexOf("safari") != -1) return 'Safari'; 
if (agt.indexOf("skipstone") != -1) return 'SkipStone'; 
if (agt.indexOf("msie") != -1) return 'Internet Explorer'; 
if (agt.indexOf("netscape") != -1) return 'Netscape'; 
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla'; 

------------------------------------------------------------------------------------------

윈도우8이 발매를 시작하면서 IE10(Internet Explorer)도 이런저런 문제가 생기네요.

우선 자바스크립트로 인터넷익스플로러 버전 체크할때 부터도 문제가 있습니다.

이건 이전 버전의 브라우저도 아직 발생되고 있는 현상인데요.

예를 들어 제가 IE9.0을 사용할 경우 버전을 체크할 경우

navigator.userAgent.indexOf('9.0') 으로 실행할 경우 
30 이란 값이 나옵니다. 유저 정보의 30번째 문자열에 정보가 있다는 것이지요

해당 정보가 없을 경우 -1값을 떨굽니다.

그래서 IE9.0의 버전을 찾을 경우 이런식으로 처리하면 됩니다.

if(navigator.userAgent.indexOf('9.0') == -1) {
  alert('사용중인 IE가 IE9.0 이 아님');
}else{
  alert('사용중인 IE가 9.0임');
}

하지만

Internet Explorer 8.0 부터 있는 기능인 [호환성보기] 기능을 사용할 경우

버전찾기에 문제가 생기게 됩니다. 

정확한 버전을 체크하지 못하게 되죠

alert(navigator.userAgent); 를 실행할 경우 출력값이 다릅니다.

[호환성보기 설정이 되어 있지 않은 경우] - 정상적으로 버전을 구할 수 있습니다.
"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)" 

[호환성보기 설정이 사용중인 경우] - IE8.0 이상에서는 거의 모두 7.0으로 표기가 됩니다.
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C)"

때문에 위 처럼 버전을 체크할 경우 7.0으로 나오게 됩니다.

이 현상은 IE10에서도 마찬가지 입니다.

그래서 [IE8.0], [IE9.0], [IE10.0]을 사용하는 사람이 [호환성 보기 기능]을 사용한다면 정확한 IE 버전을 체크하기 힘들더군요

확인해 보니.. IE8.0 이상 부터는 유저 정보에 Trident 라는게 붙습니다.

그리고 뒤에는 버전이 출력되지요. 브라우저 별로 보면 아래와 같이 나옵니다.

 IE6.0 = null
 IE7.0 = null
 IE8.0 = Trident/4.0
 IE9.0 = Trident/5.0
IE10.0 = Trident/6.0

아래와 같이 처리를 하면 해당 브라우저의 버전을 체크 할 수 있습니다.

if(navigator.userAgent.match(/Trident\/(\d.\d)/i)[1] == '6.0'){

  alert('IE10 입니다.');

} else{

  alert('IE9 이하 입니다.');

} 

이렇게 처리할 경우 다른 문제점이 하나 더 있습니다.

IE7.0 이하일 경우에는 해당 내용이 없기 때문에 null이 발생됩니다.

그래서 아래와 같이 하면 정상적으로 처리가 됩니다.

var trident = navigator.userAgent.match(/Trident\/(\d.\d)/i);

if(trident != null && trident[1] == "6.0"){

  alert('IE10 입니다.');

} else{

  alert('IE9 이하 입니다.');

}

다른 방법이 있을수도 있겠지만, 분기처리나 기타등등..
 
여튼 이렇게 할 경우 해당 버전을 찾는게 가능합니다.