📂 JAVASCRIPT/그외
[ 자바스크립트 ] IE 버전 체크용 함수 🕔 2015. 8. 6. 16:26
최종 수정일 : 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"> </span><br /> Browser version : <span id="demo2"> </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] 크로스 브라우징을 위한 유지보수 하기 쉬운 코딩 기법 (네이버 카페 - 하드코딩하는사람들)
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
'JAVASCRIPT > 그외' 카테고리의 다른 글
| userAgent의 값을 알 수 있는 영문사이트 5곳. (0) | 2015.08.31 |
|---|---|
| [ 자바스크립트 ] 태그의 title 속성 (0) | 2015.08.09 |
| [ 자바스크립트 ] Date()함수에 프로토타입 추가하기 (0) | 2015.04.12 |
| [ 자바스크립트 ] className 사용법 (0) | 2015.02.17 |
| [ 자바스크립트 ] table 태그 만들기 - createElement() (0) | 2015.01.15 |