Archive

Calender

«   2020/01   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

최종 수정일 : 2017. 11. 3.


인터넷 익스플로러(IE)를 사용할 수 있다면, 이 페이지를 IE에서 열어보시오~* ^^


출처 : Stack Overflow (영문)
위 사이트에 있는 소스를 가져와서 엣지 브라우저( IE 12 이상)에서도 적용되도록 수정하였다.


 
<script type="text/javascript">
/* 
 * 원본 : http://stackoverflow.com/questions/19999388/jquery-check-if-user-is-using-ie 
 * 수정본 : http://tonks.tistory.com/107 
 */ 

function get_version_of_IE () { 

	 var word; 

	 var agent = navigator.userAgent.toLowerCase(); 

	 // IE old version ( IE 10 or Lower ) 
	 if ( navigator.appName == "Microsoft Internet Explorer" ) word = "msie "; 

	 // IE 11 
	 else if ( agent.search( "trident" ) > -1 ) word = "trident/.*rv:"; 

	 // Microsoft Edge  
	 else if ( agent.search( "edge/" ) > -1 ) word = "edge/"; 

	 // 그외, IE가 아니라면 ( If it's not IE or Edge )  
	 else return -1; 

	 var reg = new RegExp( word + "([0-9]{1,})(\\.{0,}[0-9]{0,1})" ); 

	 if (  reg.exec( agent ) != null  ) return parseFloat( RegExp.$1 + RegExp.$2 ); 

	 return -1; 
} 

</script>
 

 

 

 
<button onclick="checkVersion()"> 클릭하세요 </button>
<p id="demo1"></p>
<p id="demo2"></p>


<script type="text/javascript">

function checkVersion () { 

	 var verNumber = get_version_of_IE(); 

	 demo1.innerHTML = verNumber; 

	 if ( verNumber == -1 ){ 
		demo2.innerHTML = "인터넷 익스플로러가 아닌, 다른 브라우저를 사용중이십니다."; 
	 } 
	 else { 
		 demo2.innerHTML = "인터넷 익스플로러 또는 엣지 브라우저를 사용중이십니다."; 
	 } 
} 
</script>
 

태그에 스타일을 설정할 때,
버전별로 적용되지 않는 속성에 대해서, 따로 class를 지정하는 방식으로
아래처럼 활용할 수 있겠다.


아래 소스는, body 태그에 스타일을 지정해주는 것이며,
그 태그에 이미 class가 있을 경우를 대비해서, 해당 태그에 class를 추가하는 방식으로 작성하였다.
물론!! body가 아닌, 다른 태그로 바꿔도 된다. ^^*


 
<style type="text/css">

 /* IE 6 버전용 스타일 */
 .IE_6 { }

 /* IE 7 버전용 스타일 */
 .IE_7 { }

 /* IE 8 버전용 스타일 */
 .IE_8 { }

 /* IE 9 버전용 스타일 */
 .IE_9 { }

 /* IE 10 이상 최신용 & 다른 브라우저용 스타일 */
 .IE_10 , 
 .Others { }

</style>
 

 
<script type="text/javascript">

function individual_case ( tag ) { 

	 if ( tag == null || ! "className" in tag ) return; 

	 var verNum = parseInt ( get_version_of_IE() ); 

	 var name = ( "" + tag.className ).replace( /^\s*|\s*$/g , "" ); 

	 if ( name.length > 0 ) name += " "; 

	 if ( verNum < 0 || verNum >= 10 ) name += "IE_10 Others"; 

	 switch ( verNum ) { 

		 case 9: 	 // verNum = 9 이면 
		 name += "IE_9"; 
		 break; 

		 case 8: 	 // verNum = 8 이면 
		 name += "IE_8"; 
		 break; 

		 case 7: 
		 name += "IE_7"; 
		 break; 

		 case 6: 
		 name += "IE_6"; 
		 break; 
	 } 

	 tag.className = name; 
} 

var myTag = document.body; 
// 또는 var myTag = document.getElementById( "someId" ); 

individual_case( myTag ); 

</script>
 

만일, 브라우저가 IE인지 Edge인지를 파악해야 한다면, 아래 내용을 참고하기 바란다.


 
<!DOCTYPE html>
<html>
<head>
<title> Get info of IE </title>

<script type="text/javascript">
/* 
 * http://tonks.tistory.com/107 
 */ 

function get_info_of_IE () { 

        var word; 
        var agent = navigator.userAgent.toLowerCase(); 

        var info = {  name: "N/A" , version: -1  }; 

        if ( navigator.appName == "Microsoft Internet Explorer" ){    // IE old version ( IE 10 or Lower ) 
                word = "msie "; 
        } 
        else if ( agent.search( "trident" ) > -1 ) word = "trident/.*rv:";    // IE 11 
        else if ( agent.search( "edge/" ) > -1  ) word = "edge/";        // Microsoft Edge 
        else  { 
                return info;    // etc. ( If it's not IE or Edge ) 
        } 


        var reg = new RegExp( word + "([0-9]{1,})(\\.{0,}[0-9]{0,1})" ); 

        if (  reg.exec( agent ) != null  ){ 

                info.version = parseFloat( RegExp.$1 + RegExp.$2 ); 

                info.name = ( word == "edge/" ) ? "Edge" : "IE"; 
        } 

        return info; 
} 
</script>

</head>
<body>

<button onclick="testing()"> Click me </button><br />

Browser name     : <span id="demo1">&nbsp;</span><br />
Browser version  : <span id="demo2">&nbsp;</span>

<script type="text/javascript">

function testing (){ 

        var object = get_info_of_IE(); 

        var browserName = object.name; 

        var browserVersion = object.version; 

        demo1.innerHTML = browserName; 
        demo2.innerHTML = browserVersion; 
} 
</script>

</body>
</html>
 

Browser name :  
Browser version :  

이 블로그에서 함께 볼만한 글 :
1. userAgent의 값을 알 수 있는 영문사이트 5곳
2. [ 자바스크립트 ] 오페라 브라우저의 버전 체크용 함수
3. [ 자바스크립트 ] className 사용법



함께 볼만한 글 :
[Tip] 크로스 브라우징을 위한 유지보수 하기 쉬운 코딩 기법 (네이버 카페 - 하드코딩하는사람들)




이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*

1 Comments

  1. 김성곤 🕔 2017.10.18 09:59 AddressModify/DeleteReply

    감사합니다. :-)