日新又日新: 브라우저 종류를 판단해주는 자바스크립트 함수

2016년 12월 14일 수요일

브라우저 종류를 판단해주는 자바스크립트 함수

- 프로젝트를 진행할때 보면 ie7,8이 크로스브라우징이 안되어서 골치 아플때가 많다..

- Detectizr.js를 사용해서 해결해도 되지만 Detectizr.js는 modernizr.js가 있어야 작동되므로..

- 간단히 ie만 체크해야 할땐 아래 함수를 사용해서 해결하면 도움이 된다.

- 사용법은 출처 및 아래 첨부파일 다운

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script>
function checkBrowser(){ // 외부 라이브러리와 충돌을 막고자 모듈화.
    // 브라우저 및 버전을 구하기 위한 변수들.
    'use strict';
    var agent = navigator.userAgent.toLowerCase(),
        name = navigator.appName,
        browser;
    
    // MS 계열 브라우저를 구분하기 위함.
    if(name === 'Microsoft Internet Explorer' || agent.indexOf('trident') > -1 || agent.indexOf('edge/') > -1) {
        browser = 'ie';
        if(name === 'Microsoft Internet Explorer') { // IE old version (IE 10 or Lower)
            agent = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(agent);
            browser += parseInt(agent[1]);
        } else { // IE 11+
            if(agent.indexOf('trident') > -1) { // IE 11 
                browser += 11;
            } else if(agent.indexOf('edge/') > -1) { // Edge
                browser = 'edge';
            }
        }
    } else if(agent.indexOf('safari') > -1) { // Chrome or Safari
        if(agent.indexOf('opr') > -1) { // Opera
            browser = 'opera';
        } else if(agent.indexOf('chrome') > -1) { // Chrome
            browser = 'chrome';
        } else { // Safari
            browser = 'safari';
        }
    } else if(agent.indexOf('firefox') > -1) { // Firefox
        browser = 'firefox';
    }

    // IE: ie7~ie11, Edge: edge, Chrome: chrome, Firefox: firefox, Safari: safari, Opera: opera
    document.getElementsByTagName('html')[0].className = browser;
    document.getElementById("browser_div").innerHTML = "브라우저 타입 : " + browser;
}
</script>
</head>
<body>
<input type="button" onClick="checkBrowser()" value="확인"/>
<br /><div id="browser_div"></div>
</body>
</html>

[출처] http://micropilot.tistory.com/category/Javascript?page=76

댓글 없음:

댓글 쓰기