[IE] IE 브라우저 및 호환성 모드 감지하기

1. 기본적인 브라우저 감지

IE 감지는 주로 userAgent 문자열에서 "msie"와 "trident" 키워드를 확인하여 수행합니다. "msie"는 IE 10까지의 버전을 감지하며, IE 11부터는 "msie" 대신 "trident" 키워드를 포함하게 됩니다.

function detectIE() {
  var agent = window.navigator.userAgent.toLowerCase();
  
  // IE 브라우저 여부 감지
  if (agent.indexOf('msie') !== -1 || agent.indexOf('trident') !== -1) {
    return true; // IE 브라우저임
  }
  return false; // IE가 아님
}

2. IE 버전 및 호환성 보기 모드 감지

IE 버전과 호환성 보기 모드 여부는 다양한 요소를 통해 파악할 수 있습니다.

호환성 보기 모드 감지

호환성 모드는 IE의 userAgent에 "msie 7"과 "trident"가 동시에 나타나는 경우 감지할 수 있습니다.

function isCompatibilityMode() {
  var agent = window.navigator.userAgent.toLowerCase();
  return agent.indexOf('msie 7') > -1 && agent.indexOf('trident') > -1;
}

버전 감지

1. IE11 감지: IE11의 경우 "msie" 문자열이 없어 "trident"만 존재합니다.
2. IE10 이하 감지: "msie" 옆의 숫자를 추출하여 버전으로 사용합니다.

function getIEVersion() {
  var agent = window.navigator.userAgent.toLowerCase();
  
  // IE 11 감지
  if (agent.indexOf('trident') > -1 && agent.indexOf('rv:11') > -1) {
    return 11;
  }
  
  // IE 10 이하 감지
  var msie = agent.indexOf('msie ');
  if (msie > -1) {
    return parseInt(agent.substring(msie + 5, agent.indexOf('.', msie)), 10);
  }
  
  return false; // IE가 아님
}

호환성 보기 모드일 때 버전 감지

호환성 모드일 때는 userAgent 정보만으로는 감지하기 어려워 객체 감지 방식을 사용합니다.

function detectCompatibilityVersion() {
  if (!window.CanvasRenderingContext2D) {
    return 8; // Canvas 미지원 - IE 8
  } else if (!window.TransitionEvent) {
    return 9; // CSS 트랜지션 미지원 - IE 9
  } else if (!window.WebGLRenderingContext) {
    return 10; // WebGL 미지원 - IE 10
  } else {
    return 11; // 나머지 - IE 11
  }
}

3. 종합 코드

위 코드를 통합하여 IE 감지, 호환성 모드 확인 및 버전 감지를 하나의 함수로 구현해 보겠습니다.

function detectIE() {
  var agent = window.navigator.userAgent.toLowerCase();
  
  // IE가 아닌 경우
  if (agent.indexOf('msie') === -1 && agent.indexOf('trident') === -1) {
    return null; // IE가 아님
  }
  
  // 호환성 보기 모드 감지
  if (isCompatibilityMode()) {
    return detectCompatibilityVersion(); // 호환성 모드일 때 버전 감지
  }
  
  // 호환성 모드가 아닐 때 버전 감지
  return getIEVersion();
}

이 코드를 통해, IE인지 여부, 호환성 보기 모드, 그리고 해당 버전까지 감지할 수 있습니다. 최신 브라우저 지원이 주가 된 환경에서는 객체 탐지 방식을 더 선호하지만, IE 감지가 여전히 필요한 경우 유용하게 활용할 수 있습니다.