[JSP] IE 브라우저 버전별 css 및 자바스크립트 적용, javascript에서 브라우저 정보 가져오기

Javascript

function fnGetInternetExplorerVersion() {

var rv = -1;

if (navigator.appName == 'Microsoft Internet Explorer') {

var ua = navigator.userAgent;

var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

if (re.exec(ua) != null)

rv = parseFloat(RegExp.$1);

}

// 추가 부분

if (rv < 8) {

// 호환성 보기 모드에서는 버젼 체크가 제데로 안됨.

//익스플로러 8 미만으로 나올 경우 Trident 값을 한번 더 체크

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

if (trident != null) {

// 버전 8이상이면 trident 값이 null 이 아님..

rv = trident[1]*1 + 4;

}

return rv;

}

Css

모든 IE에서만 적용하려면

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

IE6 버전에서만 읽어들이도록

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-only.css" />
<![endif]-->

IE7 버전에서만 읽어들이도록

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-only.css" />
<![endif]-->

조금 더 정교하게.

IE7 버전보다 낮은 버전에서만 (7버전 제외)

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-less-than.css" />
<![endif]-->

IE7 버전보다 낮은 버전에서만 (7버전 포함)

<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" />
<![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 제외)

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-greater-than.css" />
<![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 포함)

<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" />
<![endif]-->

기타 다음과 같은 문구도 가능하다.

IE가 아닌 다른 브라우저만

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="not-sucks.css" />
<![endif]-->

IE6.5 버전에서만 읽어들이도록

<!--[if IE 6.5000]>
	<link rel="stylesheet" type="text/css" href="ie6.5-only.css" />
<![endif]-->

gt 는 greater than , gte 는 greater than or equal, lt 는 less than, lte 는 less than or equal 의 약자이다. 다음과 같이 스크립트도 삽입할 수 있다.

<!--[if IE 6]>
<script type="text/javascript">
    alert("아직 IE6을 쓰는거야?"); 
</script>
<![endif]-->

자바스크립트에서 브라우저 정보 가져오기

자바스크립트는 브라우저에서 작동한다. 때때로 서버는 브라우저의 정보를 필요로 할 때가 있는데 Navigator 객체가 브라우저의 정보를 제공한다. Navigator 객체는 방문자의 브라우저의 이름, 버전 등등의 정보를 가지고 있는 객체이다.

Navigator 객체 사용 예)

document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("<br /><br />");
document.write("Cookies Enabled: " + navigator.cookie!Enabled);
document.write("<br /><br />");
document.write("Platform: " + navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " + navigator.userAgent);

출력 결과)

Browser CodeName: Mozilla

Browser Name: Microsoft Internet Explorer

Browser Version: 4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)

저작자표시 비영리

'삽질방지 팁' 카테고리의 다른 글

Eclipse Luna 버전에 JSDT jQuery 1.8.0 설치 시 에러 해결 (0)	2015.05.11
[ORANGE 팁] ORACLE PL/SQL 에서 package 생성시 삽질 방지 팁 (PLS-00103: Encountered the symbol 에러) (0)	2013.12.19
[JSP 관련] 크롬(Crome)이나 파이어폭스(firefox)에서 submit이 작동하지 않는 현상 (0)	2013.01.30
Spring annotation방식에서 ajax 기능 구현시 controller에서 writer를 선언하면 인코딩 방식이 자동으로 euc-kr로 돌아간다.... (0)	2012.11.15
[Android / Eclipse 팁] 안드로이드 이클립스 xml 소스 편집 겹칩 현상 해결 (0)	2012.10.18

소림사의 홍반장!