웹브라우저가 어떤 브라우저인지 확인하기 (navigator, userAgent)

웹브라우저 확인하기

평소에는 크롬이나 파이어폭스만 사용하다보니 인터넷 익스플로러(이하 IE)에 대해 신경쓰지 않았다.
현재 회사에서 퇴사자가 거의 시작만 해놓고 퇴사해놓은걸 떠맡아 개발중인데 원래 업무때문에 시간이 너무 없어
매일 조금씩 개발을 하다가 테스트를 진행하는데 갑자기 아차 했다..
병원 인트라넷 페이지를 만들었는데 생각해보니 병원같은데는 IE를 쓸 것 같은 불안함이 엄습했다. 급하게 IE로 테스트를 해보니 역시나 일부 Javascript API를 제대로 지원못해서 기능이 제대로 동작하지 않았다. 그래서 IE의 경우 다른 방법으로 동작하게끔 처리했고, IE인 경우를 조건문으로 처리하기 위해 아래와 같이 처리하였다.

// userAgent 값에 브라우저를 구분하는 고유의 값들이 있다.
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf("chrome") !== -1) {
  alert("크롬 브라우저");
}

userAgent를 사용해서 브라우저 고유 값을 찾아내는건데 유명한 브라우저 몇 개의 값을 보자면 다음과 같다.

값	브라우저
edge	엣지
whale	네이버 웨일
chrome	구글 크롬
firefox	파이어폭스
msie	인터넷 익스플로러 < 11버전

userAgent외에 navigator.appName으로도 가능하지만 문제는 IE11의 경우 userAgent에서 msie 값이 사라지고, appName에서 11 이전 버전은 전부 Microsoft Internet Explorer로 나타나지만 11 버전은 Netscape로 나온다.

그럼 어떻게 IE11을 알 수 있을까?
위에서 사용한 navigator.userAgent 값을 IE11에서 확인해보면 다음 값이 있다.
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Trident는 IE에서 사용하고 있는 레이아웃 엔진의 이름이다.
IE 4.0 부터 도입되어서 IE 4.0 이상부턴 userAgent 값에 Trident를 볼 수 있다.

최종 코드

그럼 위의 조건들을 조합해서 작성해보자

var agent = navigator.userAgent.toLowerCase();
if ((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') !== -1) || (agent.indexOf("msie") !== -1)) {
  // 인터넷 익스플로러 브라우저
} else {
  // 기타 브라우저
}