Embedded IE에서 실제 설치된 IE 버전이 10 이상인지 확인하는 방법

보통 웹 서버에서 클라이언트 브라우저인 IE 버전을 확인할 때는

브라우저에서 올려 보내주는 "User Agent" 값을 확인하는 방법을 많이 사용한다.

그런데,

아웃룩 Add-ins와 같은 Embedded IE 환경에서는 설치된 실제 IE 버전과 관계없이

항상 User Agent 값을 “IE 7”(MSIE 7.0) 버전으로 올려주기 때문에

IE 버전을 기준으로 HTML5 지원 여부 판단에 따른 예외 처리 등등을 하려고 하면 문제가 생긴다.

실제 IE 8, IE 9가 설치된 경우는 예외 처리를 쉽게 할 수 있겠지만

IE 10 이상이 설치된 경우에는 예외 처리를 하기가 애매해지는데,

실제로는 IE 10 이상이 설치되었지만 서버에서는 IE 7인 것으로 인식되기 때문이다.

그렇다고 IE 7까지 예외 처리해버리면 HTML5 지원이 됨에도 불구하고 사용할 수 없게 되니

이럴 수도 저럴 수도 없는 진퇴양난의 경우가 생길 수 있다.

예전에,

이런 경우 클라이언트에서 Embedded IE의 버전을 명시적으로 변경하는 방법에 대해 쓴 적이 있는데,

>> 참조: http://thermidor.tistory.com/1387

문제는, 클라이언트의 레지스트리를 조작할 수 없는 경우에는 위 방법을 사용할 수 없다.

(클라이언트 실행 시 레지스트리를 수정하는 코드를 넣을 수 있다면 위 방법을 쓸 수 있다.)

그렇다면, 정녕 방법이 없을까?

있다.

간단하게 "HTML5가 지원되는지"의 여부로 IE 10 이상이 설치되었는지 확인할 수 있다.

먼저, 아래와 같은 스크립트 코드가 있다고 치면,

if (navigator.userAgent.indexOf("MSIE 8") > 0 ||
		navigator.userAgent.indexOf("MSIE 9") > 0) {

	// 파일 선택 버튼 교체
	document.getElementById("bFiles2Upload").style.display = "none";
	var fileUpload = document.getElementById("filesToUpload");
	fileUpload.style.display = "";
	fileUpload.style.width = "92px";
	fileUpload.style.height = "25px";
	fileUpload.style.verticalAlign = "middle";
		        
	// 삭제 버튼 교체
	document.getElementById("aDel").style.display = "none";
	var fileDelete = document.getElementById("filesToDelete");
	fileDelete.style.display = "";
	fileDelete.style.height = "25px";
	fileDelete.style.verticalAlign = "middle";

	// 파일 목록 상자 크기 조절		        
	document.getElementById("drop_zone").style.height = "148px";
}

아래와 같은 방식으로 수정하면 된다.

// MSIE 7로 무조건 표시, 그러나 실제 설치된 IE가 IE 10 이상이면 window.Blob 가능
if (!(window.Blob && window.File && window.FileList && window.FileReader)) {
		if (navigator.userAgent.indexOf("MSIE 7") > 0 ||
				navigator.userAgent.indexOf("MSIE 8") > 0 ||
				navigator.userAgent.indexOf("MSIE 9") > 0) {

			// 파일 선택 버튼 교체
			document.getElementById("bFiles2Upload").style.display = "none";
			var fileUpload = document.getElementById("filesToUpload");
			fileUpload.style.display = "";
			fileUpload.style.width = "92px";
			fileUpload.style.height = "25px";
			fileUpload.style.verticalAlign = "middle";
		        
			// 삭제 버튼 교체
			document.getElementById("aDel").style.display = "none";
			var fileDelete = document.getElementById("filesToDelete");
			fileDelete.style.display = "";
			fileDelete.style.height = "25px";
			fileDelete.style.verticalAlign = "middle";

			// 파일 목록 상자 크기 조절		        
			document.getElementById("drop_zone").style.height = "148px";
		}
}

HTML5가 지원되는 브라우저는

window.Blob 및 window.File이 모두 활성화되어 있는 점을 이용하는 것이 주요 포인트가 되겠다.