userAgent와 os 체크해서 해당 버전들을 html에 class로 추가하기다.
이렇게하면 브라우저뿐만 아니라 해당 운영체제별로 크로스브라우징을 할 수 있다.
처음으로 풀 자바스크립트로 해봤는데, 확실히 공부하면 제이쿼리보다 순수스크립트가 더 재미있을 것 같다는 생각이 들었다.
아무튼 아래코드로 작성하면, <html class="ie11 desktop win">이런식으로 클래스가 추가된다.
특정 브라우저나 os 이슈 대응 때 이용하면 좋을 것 같다.
var userAgentCheck = function(){ var ua = navigator.userAgent.toString().toLowerCase(); var agent = { ie : (/msie/i).test(ua) || (/trident/i).test(ua), firefox: (/firefox/i).test(ua), webkit: (/applewebkit/i).test(ua), chrome: (/chrome/i).test(ua), opera: (/opera/i).test(ua), ios: (/ip(ad|hone|od)/i).test(ua), android: (/android/i).test(ua) }; agent.safari = agent.webkit && !agent.chrome; agent.mobile = document.ontouchstart !== undefined && ( agent.ios || agent.android ); agent.desktop = !(agent.ios || agent.android); // ie 버전체크 if(agent.ie){ var _ieversion = ua.match(/(msie |trident.*rv[ :])([0-9]+)/)[2]; _ieversion = Math.floor(_ieversion); agent.ie = "ie"+_ieversion; } agent.os = (navigator.appVersion).match(/(mac|win|linux)/i); agent.os = agent.os ? agent.os[1].toLowerCase() : ''; var _html = document.getElementsByTagName('html')[0]; var _class = ''; for (var value in agent) { if(agent[value]){ if(value == 'os'){ _class += agent.os; }else if(value == 'ie'){ _class += agent[value]+' '; }else{ _class += value+' '; } } } _html.className += _class; }();
'퍼블리싱 > jQeury, Javascript' 카테고리의 다른 글
| Swipe 플러그인 모음 (0) | 2015.06.25 |
|---|---|
| == 과 ===의 차이 (0) | 2015.05.27 |
| iframe안 요소에 접근하기 (0) | 2015.05.11 |
| test() method 사용하기 (0) | 2015.05.04 |
| Windows xp, vista, 7 버전 체크 (0) | 2015.05.04 |