[javascript] 브라우저 버전을 어떻게 감지 할 수 있습니까?

JAVASCRIPT / 글쓴이

웹 사이트를 방문하는 사용자에게 Firefox 3 또는 4가 있는지 감지 할 수있는 코드를 검색했습니다. 찾은 버전은 브라우저 유형을 감지하는 코드입니다.

이와 같은 브라우저 버전을 어떻게 감지합니까?

답변

당신은 브라우저가 무엇을 볼 수 라고 하고, 로그인하거나 여러 브라우저를 테스트하기 위해이 정보를 사용합니다.

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem, 
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

console.log(navigator.sayswho); // outputs: `Chrome 62`

스 니펫 확장

답변

이것은 Kennebec의 대답에 대한 개선입니다.

function get_browser() {
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR|Edge\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }

var browser=get_browser(); // browser.name = 'Chrome'
                           // browser.version = '40'

console.log(browser);

스 니펫 확장

이런 식으로 코드의 모호함을 방지 할 수 있습니다.

답변

이것은 kennebec의 (K) 답변과 Hermann Ingjaldsson의 (H) 답변을 결합합니다.

  • 원래 답변의 최소 코드를 유지합니다. (케이)
  • Microsoft Edge (K)와 호환
  • 새 변수 / 객체를 생성하는 대신 네비게이터 객체를 확장합니다. (케이)
  • 브라우저 버전과 이름을 독립적 인 자식 개체로 분리합니다. (H)

 

navigator.browserSpecs = (function(){
    var ua = navigator.userAgent, tem, 
        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return {name:'IE',version:(tem[1] || '')};
    }
    if(M[1]=== 'Chrome'){
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return {name:M[0], version:M[1]};
})();

console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

if (navigator.browserSpecs.name == 'Firefox') {
    // Do something for Firefox.
    if (navigator.browserSpecs.version > 42) {
        // Do something for Firefox versions greater than 42.
    }
}
else {
    // Do something for all other browsers.
}

답변

2019 년 5 월 현재 브라우저 감지를 처리하는 몇 가지 주요 라이브러리가 있습니다.

lancedikson의 Bowser -3,761 ★ s-마지막 업데이트 날짜 : 2019 년 5 월 26 일-4.8KB

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);
<script src="https://unpkg.com/bowser@2.4.0/es5.js"></script>

스 니펫 확장

* Chromium 기반 Edge 지원

bestiejs의 Platform.js -2,250 ★ s-마지막 업데이트 2018 년 10 월 30 일-5.9KB

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version +
               " on " + platform.os);
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>

스 니펫 확장

gabceb의 jQuery Browser -504 ★ s-최종 업데이트 2015 년 11 월 23 일-1.3KB

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber +
               " on " + $.browser.platform);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

스 니펫 확장

darcyclarke의 Detect.js (아카이브) -522 ★ s-마지막 업데이트 2015 년 10 월 26 일-2.9KB

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version +
               " on " + result.os.family);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

스 니펫 확장

QuirksMode의 브라우저 검색 (아카이브) -최종 업데이트 2013 년 11 월 14 일-884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version +
               " on " + BrowserDetect.OS);
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>

스 니펫 확장

주목할만한 언급 :

  • WhichBrowser -1,355 ★ s-마지막 업데이트 2018 년 10 월 2 일
  • Modernizr -23,397 ★ s-2019 년 1 월 12 일에 마지막 업데이트-먹이를 먹이려면 피처 감지 기능이 canIuse 스타일 질문을 유발 해야합니다 . 브라우저 감지는 실제로 사용자 지정된 이미지, 다운로드 파일 또는 개별 브라우저에 대한 지침을 제공하기위한 것입니다.

추가 자료

답변

바우 자바 스크립트 라이브러리는이 기능을 제공합니다. 

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
}

잘 유지되고있는 것 같습니다.

답변

이것을 사용하십시오 : http://www.quirksmode.org/js/detect.html

alert(BrowserDetect.browser); // will say "Firefox"
alert(BrowserDetect.version); // will say "3" or "4"

답변

jQuery 1.9.1 이상이 $.browser기능 을 제거 했기 때문에 스스로 솔루션을 찾고있었습니다 . 나는 나를 위해 작동하는이 작은 기능을 생각해 냈습니다. 어떤 브라우저인지 확인하려면 전역 변수 (내 _browser라고 함)가 필요합니다. jsfiddle 을 어떻게 사용하는지 설명하기 위해 jsfiddle 을 작성했습니다. 물론 _browser.foo에 대한 테스트를 추가하여 다른 브라우저에서 확장 할 수 있습니다. 여기서 foo는 브라우저의 이름입니다. 나는 단지 인기있는 것들을했다.

detectBrowser ()

_browser = {};

function detectBrowser() {
  var uagent = navigator.userAgent.toLowerCase(),
      match = '';

  _browser.chrome  = /webkit/.test(uagent)  && /chrome/.test(uagent)      &&
                     !/edge/.test(uagent);

  _browser.firefox = /mozilla/.test(uagent) && /firefox/.test(uagent);

  _browser.msie    = /msie/.test(uagent)    || /trident/.test(uagent)     ||
                     /edge/.test(uagent);

  _browser.safari  = /safari/.test(uagent)  && /applewebkit/.test(uagent) &&
                     !/chrome/.test(uagent);

  _browser.opr     = /mozilla/.test(uagent) && /applewebkit/.test(uagent) &&
                     /chrome/.test(uagent)  && /safari/.test(uagent)      &&
                     /opr/.test(uagent);

  _browser.version = '';

  for (x in _browser) {
    if (_browser[x]) {

      match = uagent.match(
                new RegExp("(" + (x === "msie" ? "msie|edge" : x) + ")( |\/)([0-9]+)")
              );

      if (match) {
        _browser.version = match[3];
      } else {
        match = uagent.match(new RegExp("rv:([0-9]+)"));
        _browser.version = match ? match[1] : "";
      }
      break;
    }
  }
  _browser.opera = _browser.opr;
  delete _browser.opr;
}

현재 브라우저가 Opera인지 확인하려면

if (_browser.opera) { // Opera specific code }

편집 서식을 수정하고 IE11 및 Opera / Chrome에 대한 검색을 수정했으며 결과에서 browserResult로 변경되었습니다. 이제 _browser키 의 순서는 중요하지 않습니다. jsFiddle 링크가 업데이트되었습니다 .

2015/08/11 편집 Internet Explorer 12 (EDGE)에 대한 새로운 테스트 사례가 추가되어 작은 정규 표현식 문제가 해결되었습니다. jsFiddle 링크가 업데이트되었습니다 .