다양해진 브라우징 환경

10년이면 강산도 변한다는 말이 있듯, 브라우저 환경도 지난 10년간 IE의 독점 시대를 지나, 요즘은 Mozilla Firofox, Google Chrome, Safari, Opera 등의 브라우저 사용 비중이 늘어나고 있는 추세입니다.
아직도 덜떨어진 IE6의 사용을 권장하는 한심스런 정부와 기업이 있는 이 나라에서조차 IE 외의 브라우저 사용 빈도가 눈에 띄게 늘어난 상황이죠.

이런 추세에 힘입어 크로스 브라우징이 필수 불가결하게 되었는데요.
이에 대한 정보들을 찾아보던 중 문득 '브라우저의 접속 정보를 노출시켜보면 어떨까?'하는 생각에 해당 스크립트를 구글링을 통해 찾아보았습니다.

스크립트의 적용

다음의 스크립트를 복사하셔서 <head> 와 </head> 사이의 적당한 위치에 넣어주도록 합니다.
<script type="text/javascript">
<!--
var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();
//-->
</script>


- 원본 스크립트 출처 : http://www.quirksmode.org/js/detect.html

위 스크립트는 동작을 설정한 것 뿐이므로, 이를 출력하기 위해서는 다음과 같이 출력을 위한 스크립트를 원하는 위치에 별도로 넣어주셔야 합니다.
<script type="text/javascript">
    <!--
        document.write('접속정보 : ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' (' + BrowserDetect.OS + ')');
    // -->
</script>

예제는 제 블로그 하단의 접속정보, 혹은 이곳을 참조해 주시기 바랍니다.
현재 브라우저에서는 댓글을 표시할 수 없습니다.
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.