다양해진 브라우징 환경
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>
예제는 제 블로그 하단의 접속정보, 혹은 이곳을 참조해 주시기 바랍니다.
'컴퓨터' 카테고리의 다른 글
| Calneb 550 @ 3.4G (0) | 2010.02.21 |
|---|---|
| 칼네브 약간의 HTT 오버 및 안정화 (0) | 2010.02.20 |
| 새로 맞춘 컴퓨터로 칼네브에 도전... (0) | 2010.02.19 |
| XP에서도 윈7의 바탕화면 슬라이드 기능을 흉내내보자 (0) | 2010.02.05 |
| 친구의 부탁으로 컴퓨터 부품을 골라 보았다. (3) | 2010.01.20 |
| Windows 7 소리구성표의 명칭 변경하기 (8) | 2009.11.30 |
| Windows 7 의 기본 소리구성표 레지스트리 (7) | 2009.11.29 |
| Windows 7 으로 갈아탔습니다. (4) | 2009.11.29 |
| 스킨변경 (0) | 2009.11.25 |
| prototype.js 기반의 Context menu (4) | 2009.11.24 |
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.