월별 글 목록: 2013년 10월월

[JS] IE에서 호환성 보기를 체크한 사용자 판별하기

0. 들어가며 : IE의 호환성 보기에 대하여

호환성보기 여부와 상관 없이 최신 렌더링을 하기 위해서 다음과 같은 코드를 사용합니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

메타태그는 일종의 지침입니다.
브라우저가 페이지를 이해하는데 정보를 주는 역할을 하죠.
위 메타태그의 의미는 ‘화면을 IE 최신버전을 기준으로 렌더링 하라’ 라는 의미입니다.
브라우저는 최신 버전을 기준으로 렌더링 하고, 따라서 호환성 보기가 필요치 않으므로 호환성 보기 버튼을 감춥니다.
하지만 그럼에도 불구하고 호환성 보기로 사이트를 들어오는 유저들이 있습니다. 케이스를 정리해보면 대략 다음과 같습니다.

  • XP에서 IE8을 사용하는 경우
    호환성 보기 버튼이 항상 표시되므로 사용자들이 언제든 호환성 보기로 변경이 가능합니다.
  • Windows 7에서 IE8, 9를 사용하는 경우
    위와 같은 이유지만 이 경우는 윈도 업데이트를 사용하지 않거나 일부러 업데이트를 막은 경우라고 볼 수 있겠습니다.
  • 모든 사이트를 호환성으로 보도록 설정한 경우
    이 옵션은 기본적으로 활성화 되지 않으므로 사용자가 스스로 이 옵션을 켰을 가능성이 높습니다. 개발자가 테스트 환경 구축을 위해서 이러는 경우도 있죠.
    가끔 Tweek된 버전의 윈도에 이 옵션이 기본으로 활성화 된 경우가 있습니다. 사실 제일 곤란한 건 이런 경우죠.

사실 저는 기본적으로 이런 특수한 상황에 놓인 유저들까지 커버할 수는 없다고 생각하고 있습니다.
호환성 보기를 끌 수 있도록 안내를 하거나, IE7용으로 만들어진 페이지나 사이트로 리디렉션을 해주는 정도가 최선일 것 같네요.

1. 해결 : JS로 userAgent 체크하기

여튼, 그런 이유로 IE7 유저가 아닌 호환성 보기를 사용하는 유저를 체크하는 방법에 대해서 생각을 해보았습니다.
JS의 navigator.userAgent를 이용해서 다음과 같은 체크를 할 수 있겠네요.

if( navigator.userAgent.indexOf( "MSIE 7" ) > 0 && navigator.userAgent.indexOf( "Trident" ) ) {
	// 호환성 보기 활성화
}

정규식을 이용해 다음과 같이 좀 더 짧게 작성할 수도 있고, html 태그에 class도 추가해보죠.

if( /MSIE 7.*Trident/.test( navigator.userAgent ) ) {
	document.getElementsByTagName( "html" )[ 0 ].className += " ie-compatible";
}

원리는 대략 이렇습니다.
MS의 렌더링 엔진은 Trident 입니다. IE7에서 처음 도입되었습니다. 하지만 userAgent에 Trident가 명시되기 시작한건 IE8 부터죠.
순정 IE7은 “MSIE 7” 문자열은 포함하지만 “Trident”는 포함하지 않습니다.
IE8 이상에서 호환성 보기를 전환하면 userAgent에 버전 정보가 MSIE 7로 표시가 되기 때문에, 두 가지 문자열을 다 포함하게 되죠.

2. 예제

대략 다음과 같은 활용이 가능하겠습니다.

<!doctype html>
<html>
	<head>
		<title>Test</title>
		<meta charset="utf-8" />
		<script>
		if( /MSIE 7.*Trident/.test( navigator.userAgent ) ) {
			document.getElementsByTagName( "html" )[ 0 ].className += " ie-compatible";
		}
		</script>
		<style type="text/css">
			.is-compatible {
				display: none;
			}
			.ie-compatible .is-compatible {
				display: block;
			}
			.ie-compatible .standard {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="is-compatible">호환성 보기 동작중</div>
		<div class="standard">표준 동작중</div>
	</body>
</html>