IE 에만 적용되는 스크립트

해외 큰 사이트들을 보면 요즘 추세가 IE를 아예 지원하지 않는거긴 합니다만...

 

(Internet Explorer가 하도 구려서)

 

그래도 간혹 이 IE에서만 다르게 실행되게 코드를 짜줘야 할 때가 있습니다. (특히 한국에선...)

다행히 MS의 Edge 는 해당이 안되고요.

 

시장조사기관 스탯카운터에 따르면 2020년3월 기준 전 세계 웹브라우저 점유율은 크롬이 69.35%로 1위고 파이어폭스 9.54%, 사파리 8.51%, 엣지 4.64% 등이 그 뒤를 잇는다. IE는 3.47%로 5위다. 
반면 한국에서는 크롬이 71.56%로 1위고 IE가 13.76%로 2위다. 엣지 4.73%, 웨일 3.93%, 사파리 3.34%, 파이어폭스 1.61%가 뒤따르고 있다.

출처: 디지털 데일리

 

암튼, 그럴 때 아래처럼 구분하면 IE에만 해당되는 스크립트를 쉽게 짤 수 있습니다.

 

if(document.currentScript === undefined){ 
	// IE 에서만 돌아갈 내용
} else {
	// IE 가 아닐 때 돌아갈 내용
}

문서의 currentScript 속성은 유일하게 IE만 지원하지 않는 항목이라 이게 있는지 없는지 확인한 후 그에따라 처리하는 방식입니다.

 

그러나 만약 상황이 조금 더 복잡해서 IE에서만 다른 js 파일을 불러와야 하고, 또 그렇게 불려진 js 를 이용해 뭔가를 실행해야 한다면 아래처럼 하면 됩니다.

 

<script>
(function() {
	var s = document.createElement('script');
	s.type = "text/javascript";
	if(document.currentScript === undefined){ 
		// if IE
		s.src = './images/highlight.min.old.js'; //IE 전용 스크립트 파일
		s.onload = function() {
			//IE전용 스크립트가 로딩되고 실행할 내용들
		}
	} else {
		//if not IE
		s.src = './images/highlight.min.js'; //비IE 용 스크립트 파일
		s.onload = function() {
			//비IE 용  스크립트가 로딩되고 실행할 내용들
		}
	}
	document.head.appendChild(s); //스크립트를 헤드에 넣어주기
})();
</script>

위 예시에 이용된 highlight.js 가 실제로 버전 10부터는 IE를 지원하지 않아서 전혀 작동하지 않습니다.

그래서 저는 혹시 모를 IE11으로의 접속에 대비해 위처럼 ie 에선 9.0버전의 highlight.js를 비ie에선 10.0버전이 불려지게 했습니다.

 

단점으로는, 스크립트가 로딩되고 나서 실행할 내용들이 다르면 상관없지만 IE건 아니건 똑같은 경우에도 위 아래 중복해서 넣어줘야 한다는 거죠. (예를 들어 줄번호 표시 같은 추가 기능)

 

하지만!! 그럴땐 아래처럼 해결하면 소스가 조금 짧아질 수 있겠습니다.

 

<script>
(function() {
	var s = document.createElement('script');
	s.type = "text/javascript";
	if(document.currentScript === undefined){ 
		// if IE
		s.src = './images/highlight.min.old.js'; //IE 전용 스크립트 파일
		s.onload = runThisFunc;
	} else {
		//if not IE
		s.src = './images/highlight.min.js'; //비IE 용 스크립트 파일
		s.onload = runThisFunc;
	}
	document.head.appendChild(s); //스크립트를 헤드에 넣어주기
})();

function runThisFunc() {
	// IE전용과 비IE용에 공통으로 적용되는 내용 실행하기
}
</script>

빠른 시일내에 IE가 완전히 사라지길 바라며...