[phil-story] Always Fighting

'자바스크립트'에 해당되는 글 15건

2011.11.17 javascript] Browser System Information. 브라우저에서 정보 확인.

IT_Expert/Tag-Script | Posted by 낫기법필 2011. 11. 17. 15:54

javascript] Browser System Information. 브라우저에서 정보 확인.

[쥔장]===================================
Internet Explorer, FireFox, Chrome 브라우저에서 확인을 해보았으며,
각 브라우저마다 보여주는 정보가 상이했다.
이를 활용해서 버전 정보를 체크한다.
특히 나에게는 OS의 버전을 찾고자 했다.
이 과정에서 replace 함수 사용에 있어서 특이한 점을 발견했다.
=========================================

우선 브라우저에서 버전 정보를 확인하려면 javascript 에서 제공되는 개체를 이용해야 한다.

navigator.userAgent

라는 개체인데, 이것은 각 브라우저에서 모두 작동이 된다.

다른 개체도 있지만 모든 브라우저 호환을 위해 navigator.userAgent 개체를 이용하도록 한다.

테스트를 위한 기본 소스를 작성해본다.

<script type="text/javascript">
function chkOSIE()
{
var sysInfoTemp = navigator.userAgent;
alert("ie sys info : " + navigator.userAgent);
}
</script>

이를 실행하면 아래의 이미지와 같이 각 브라우저마다 보여주는 정보가 상이함을 체크할 수 있다.

[ Internet Explorer ]

[ FireFox ]

[ Chrome ]

이렇게 필요한 정보를 확인했으니, 그 중에서 OS의 정보를 추출해보도록 한다.

내가 알고자하는 소중한 정보는 모두 괄호() 안에 있음을 확인했다.
따라서 괄호() 안의 내용만 추출하여 OS 버전을 확인해보자.

추가적인 소스는 아래와 같다.

<script type="text/javascript">
function chkOSIE()
{
// 브라우저 정보를 담는다.
    var sysInfoTemp = navigator.userAgent;
// 브라우저 정보 중 괄호부분을 찾는다.
    var sysInfoFrom = sysInfoTemp.indexOf('(')+1;
    var sysInfoEnd = sysInfoTemp.indexOf(')')-1;
// 괄호 부분만을 추출하여 담는다.
    var sysInfoSubstring = sysInfoTemp.substr(sysInfoFrom, sysInfoEnd-sysInfoFrom+1).replace(/ /g,'');
// 괄호안의 정보가 ';' 을 구분자로 정보가 담겨있으니 이를 쪼개서 담는다.
    var sysInfoSplitArr = sysInfoSubstring.split(';');

    var sysInfoOS = "";
    var sysInfoText = "";
    for(var i=0;i<sysInfoSplitArr.length;i++)
    {
// 구분된 각 정보를 대문자로 변환하여 담는다.
     sysInfoText = "";
    sysInfoText = sysInfoSplitArr[i].toUpperCase();
    sysInfoText = sysInfoText.replace(/ /g,'');
// 윈도우 버전 체크를 위해 해당 문자열 찾아서 담는다.
     if ( sysInfoText.indexOf('WINDOWS NT') > -1
       || sysInfoText.indexOf('WINDOWSNT') > -1 )
    {
      sysInfoOS = sysInfoText;
      break;
    }
    }

return;
}
</script>

위와 같이 소스를 구성했다.

navigator.userAgent 개체 자체적으로 속성이 있으면 좋겠는데, 찾아보았지만 딱히 해당되는 속성을 찾지 못해서 부득이 위와 같이 구성을 했다.

이렇게 구성된 것을 각 브라우저마다 값을 체크해본다.

[ Internet Explorer ]

[ FireFox ]

[ Chrome ]

각 브라우저에서는 위와 같은 결과가 나왔다.
모두 보여주는 정보는 약간씩 상이했지만 내가 원하는 OS 버전 정보는 추출해낼 수 있었다.

추가적으로
위의 과정에서 OS 버전 정보를 추출해내고자 해서 공백" " 을 비공백"" 으로 변환하려고 replace 함수를 사용했으나
사용방법에 약간의 차이가 있음을 발견했다.

이에 대한 사용방법은
문자열만 비교해서 변환하는 방법, 정규식을 이용해서 변환하는 방법 이 있었다.

소스를 비교해보자

var sysInfoSubstring = sysInfoTemp.substr(sysInfoFrom, sysInfoEnd-sysInfoFrom+1).replace(/ /g,'');
var sysInfoSubstring2 = sysInfoTemp.substr(sysInfoFrom, sysInfoEnd-sysInfoFrom+1).replace(' ','');

위의 것은 정규식 방법, 아래것은 문자열 단순비교 이다.

아래의 방법으로 했을 때는 공백이 비공백으로 변경되지 않았으나, 위의 방법으로는 변경이 잘 되었다.

이미지로 비교를 해보자.

[ Internet Explorer ]