[Javascript]브라우저 체크하기

요즘 포트폴리오 용도로 사이트를 하나 개발중인데 브라우저 타입이 IE일 때와 크롬일 때 실행차이가 있는 부분이 있다...ㅠㅠ

물론 브라우저 시장이 크롬이 독보적이긴 하나 예외사항은 언제나 있으니까.. 이 부분은 따로 처리해줘야할 것 같았다.

fullpage.js라는 오픈소스를 사용해서 한 페이지를 길게 사용할려고 했는데 크롬에서는 정상적으로 되는데 IE에서는 아래처럼 나온다. 이유를 찾아보다가 차라리 접속 브라우저가 IE일경우에는 다른 페이지를 출력시키는 것도 괜찮을 것 같다는 생각이 들었다. 그리고 그 페이지에는 포트폴리오 pdf파일을 업로드 시켜놓을 계획이다.

각설하고 구글링을 시작했다.

브라우저 타입 체크는 어렵지 않았다.

IE 11버전의 경우 조금 까다롭긴했지만 아래와 같이 잡을 수 있었다.

<script type="text/javascript">
window.onload = function(){
    var browse = navigator.userAgent.toLowerCase(); 
        
    if( (navigator.appName == 'Netscape' && browse.indexOf('trident') != -1) || (browse.indexOf("msie") != -1)) {
         alert("본 사이트는 크롬버전에 최적화되어있습니다.");        
         window.location.href = "../intro/portfollio.jsp";
    }
 
};
</script>

코드를 조금 설명해보면 다음과 같다.

navigator 객체는 브라우저의 정보를 제공해주는 객체이다.

userAgent는 클라이언트가 사용하는 브라우저의 종류라고 볼 수 있다. 실제로 웹에 찍어보면 확인할 수 있다.

alert("브라우저는 ? " +navigator.userAgent);

indexOf()는 문자열의 위치를 구할 때 사용하기도 하지만 문자열을 찾을 때도 사용이 가능하다. indexOf()를 사용하여 찾는 문자열이 없는 경우 -1을 반환한다. 때문에 -1이 아닌 경우가 조건에 붙는다.

navigator.appName == 'Netscape' && browse.indexOf('trident') != -1) || (browse.indexOf("msie") != -1)

appName은 웹 브라우저의 이름이다. 따라서 IE 11버전을 고려하여(11버전 이상부터 appName을 "Netscape"를 사용하더라..) 비교해준다.

다음으로 trident. IE 8버전 이상부터는 유저정보에 "trident"라는게 붙었다.

 IE6.0 = null

 IE7.0 = null

 IE8.0 = Trident/4.0

 IE9.0 = Trident/5.0

IE10.0 = Trident/6.0

마지막으로 msie는 "Microsoft Internet Explorer"를 뜻한다. toLowerCase()로 소문자 치환을 해줬기 때문에 msie로 비교되었다.

<결과>

<redirect된 페이지>

추가로 아래는 크롬, 사파리, 파이어폭스의 경우이다.

if( agent.indexOf("chrome") != -1 ){
    alert("CHROME");
} else if ( agent.indexOf("safari") != -1 ){
    alert("SAFARI");
} else if ( agent.indexOf("firefox") != -1 ){
    alert("FIREFOX");
}

---

피드백은 언제나 환영입니다 :)