브라우저 종류 판별

공지사항

작성중인 블로그 글 목록

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

티스토리 뷰

■ 프론트엔드 ■/JavaScript

브라우저 종류 판별

serpiko 2014. 1. 24. 14:46

1. 브라우저 종류 판별

여러가지 방법이 있지만 현재 (2014.07월) 까지 대다수 브라우저와 특히 IE계열 7,8,9,10,11을 판별 해 내는 간단한 함수를 만들어보고

IE의 경우 프론트엔드 개발자를 지독하게 괴롭히는 호환성 보기 체크 여부까지 검사하는 방법을 알아보겠다.

2. IE버전을 구분 할 때에는 navigator.appName을 사용하지 말것

예전에는 IE의 경우 최초 navigator.appName 메서드로 접근하여 "Microsoft Internet Explorer" 라는 문자열로 알 수 있었는데

IE11의 경우 navigator.appName 이름이 Netscape로 나온다. 쌩뚱맞게 Netscape로 나오는 이유는? -> 본인도 모르겠다.

표로 정리)

IE 버전	navigator.appName
11	Netscape
10	Microsoft Internet Explorer
9	Microsoft Internet Explorer
8	Microsoft Internet Explorer
7	Microsoft Internet Explorer

3. IE버전을 구분 할 때에는 MSIE를 사용하지 말것

navigator.userAgent 의 반환값 중에 MSIE를 indexOf로 조회하여 그 값으로 구분하거나 판별했다면 다음과 같은 중요한 문제가있다.

'IE 11버전 부터 더이상 navigator.userAgent에 MSIE가 포함되어있지 않으므로 MSIE 토큰으로는 버전 판별 불가.'

이 말은 IE 11의 에이전트에는 MSIE 토큰이 없고 대신 rv:11.0 으로 표시 되어있다.

// IE 11

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.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; .NET4.0E; rv:11.0) like Gecko

불과 IE 10 까지의 에이전트에는 MSIE 버전이 표기되어 있었다.

//IE 10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

정리하자면 8부터는 Trident로 표기하기 시작했음을 알 수 있다.

4. 결론. IE는 Trident 토큰으로 판별해야 한다.

앞으로는 Trident토큰으로 IE의 버전을 체크해야한다. IE6은 제외하겠다..

표로 정리)

IE 버전	trident
11	7.0
10	6.0
9	5.0
8	4.0
7	null

소스 적용

13~21 : 각 브라우저의 에이전트 정보 중에서 "trident" 문자열을 확인한뒤 조건문으로 검사한다.

4번의 표를 기준으로 각 버전을 알 수 있다. (11,10,9,8)

24 : 애석하게도 IE 7은 trident 값이 없으니..

ㄱ. navigator.appName == 'Microsoft Internet Explorer' 으로 검사하거나

ㄴ. 주석 처리된 27 ~ 29번 라인처럼 기존 MSIE를 검사하여 값이 7 이하로 떨어지면 IE 7 이하가 맞다. 6은 버렸다.

33 : 이외에 나머지 브라우저는 에이전트 정보를 모두 소문자로 바꾼뒤 고유의 스트링 네임으로 indexOf 해주면 된다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> serpiko's browser-userAgent </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    function getBrowserType(){
         
        var _ua = navigator.userAgent;
        var rv = -1;
		
		//IE 11,10,9,8
		var trident = _ua.match(/Trident\/(\d.\d)/i);
		if( trident != null )
		{
			if( trident[1] == "7.0" ) return rv = "IE" + 11;
			if( trident[1] == "6.0" ) return rv = "IE" + 10;
			if( trident[1] == "5.0" ) return rv = "IE" + 9;
			if( trident[1] == "4.0" ) return rv = "IE" + 8;
		}
		
		//IE 7...
		if( navigator.appName == 'Microsoft Internet Explorer' ) return rv = "IE" + 7;
		
		/*
		var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if(re.exec(_ua) != null) rv = parseFloat(RegExp.$1);
		if( rv == 7 ) return rv = "IE" + 7; 
		*/
		
		//other
		var agt = _ua.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("netscape") != -1) return 'Netscape'; 
        if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
	}
		
	document.write( getBrowserType() );
</script>
</head>
<body>
</body>
</html>

Edge를 구별하기 위해서 스크립트를 수정 2018.09.06

MS Edge를 구별하기 위해서 스크립트를 수정하였다.

/***********************************************************
*
* Author : serpiko@hanmail.net 허정진 / 2017.06.09
*
* Last Update : 2018.03.05
*
* ClassName : Browser
*
* Public Method : getType, isIE, isMobile
*
권장하는 사용법
var browser = new Browser;
console.log( browser.getType() );
console.log( browser.isIE() );
console.log( browser.isMobile() );
*
*
*
***********************************************************/
var Browser = function(){}
Browser.prototype = (function(){
return{
constructor : Browser
}
})();
Browser.prototype.getType = function(){
var agent = navigator.userAgent.toLowerCase(),
name = navigator.appName,
browser;
// MS 계열 브라우저를 구분하기 위함.
if(name === 'Microsoft Internet Explorer' || agent.indexOf('trident') > -1 || agent.indexOf('edge/') > -1) {
/*
var trident = _ua.match(/Trident\/(\d.\d)/i);
if( trident != null )
{
if( trident[1] == "7.0" ) return rv = "IE" + 11;
if( trident[1] == "6.0" ) return rv = "IE" + 10;
if( trident[1] == "5.0" ) return rv = "IE" + 9;
if( trident[1] == "4.0" ) return rv = "IE" + 8;
}
*/
browser = 'ie';
if(name === 'Microsoft Internet Explorer') { // IE old version (IE 10 or Lower)
agent = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(agent);
browser += parseInt(agent[1]);
} else { // IE 11+
if(agent.indexOf('trident') > -1) { // IE 11
browser += 11;
} else if(agent.indexOf('edge/') > -1) { // Edge
browser += 'edge';
}
}
return browser;
}else{
//other
if (agent.indexOf("chrome") != -1) return 'Chrome';
if (agent.indexOf("opera") != -1) return 'Opera';
if (agent.indexOf("staroffice") != -1) return 'Star Office';
if (agent.indexOf("webtv") != -1) return 'WebTV';
if (agent.indexOf("beonex") != -1) return 'Beonex';
if (agent.indexOf("chimera") != -1) return 'Chimera';
if (agent.indexOf("netpositive") != -1) return 'NetPositive';
if (agent.indexOf("phoenix") != -1) return 'Phoenix';
if (agent.indexOf("firefox") != -1) return 'Firefox';
if (agent.indexOf("safari") != -1) return 'Safari';
if (agent.indexOf("skipstone") != -1) return 'SkipStone';
if (agent.indexOf("netscape") != -1) return 'Netscape';
if (agent.indexOf("mozilla/5.0") != -1) return 'Mozilla';
}
}
Browser.prototype.isIE = function(){
var bool = false;
var patt = /ie/gi;
if( patt.test( this.getType() ) ) bool = true;
return bool;
}
Browser.prototype.isMobile = function(){
var filter = "win16|win32|win64|mac";
if( navigator.platform ){
if( filter.indexOf(navigator.platform.toLowerCase())<0 ){
//alert('mobile');
return true; //Mobile
}else{
//alert('pc');
return false; //PC
}
}
}

IE 호환성 여부는 어떻게 판별 하는가

호환성보기 옵션이 있는IE의 경우 같은 trident라 해도 MSIE가 다르게 표기된다.

예를 들어 IE10의 경우

//IE10 Default

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

//IE10 호환성보기 체크

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/6.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; .NET4.0E)

이렇게 MSIE 버전에 따라서 내부적으로 7버전의 엔진을 가지고 동작하게 되고 직접 MSIE 버전을 알아 보려면 다음과 같은 정규식으로

확인이 가능하다.

var rv;

var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if(re.exec( navigator.userAgent ) != null) rv = parseFloat(RegExp.$1);

console.log( rv ); // 7

IE 호환성 렌더링의 해결책

MSIE로 IE의 엔진 버전을 알 수있겠지만 그냥 강제로 본인의 최신 버전 IE로 인식 되게 할 수 있다.

바로 meta태그를 이용하는 것인데 다음과 같다.

참고로 특정 엔진버전으로 렌더링 하려면 다음과 같이 지정 해 주면 된다.

* 내용수정 : 2014.07.22 / 추가내용 제보 : veo

저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

부정연산자를 이용해 토글을 사용한 반복 애니메이션 (0)	2014.02.11
정규식 한글 체크 (1)	2014.02.10
indexOf - String개체안에서 부분 문자열이 처음 나오는 문자 위치 반환 (0)	2014.01.24
div 테이블구성과 고정좌표 display 연산 (0)	2014.01.17
canvas의 셀렉팅과 인식 (0)	2013.12.03

머리가 나뻐서 삽질 SAP(Study And Programming)

티스토리 뷰

브라우저 종류 판별

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

티스토리툴바