Safari, Chrome, IE, Firefox 및 Opera 브라우저를 감지하는 방법?

822

FF, Chrome, IE, Opera 및 Safari에 5 개의 애드온 / 확장 프로그램이 있습니다.

사용자 브라우저를 인식하고 설치 단추를 클릭 한 후 해당 애드온을 다운로드하도록 리디렉션하려면 어떻게해야합니까?

javascript  browser-detection 
— FrankC
소스
2
detectjs를 사용해보십시오. 모든 브라우저에서 사용할 수 있습니다
— 친구
1
— Matthijs Wessels
2
detect.js는 더 이상 (에 따라 유지하지 github.com/darcyclarke/Detect.js , 그들이 추천) github.com/lancedikson/bowser
— YakovL
UAParser Plugin을 사용했으며 Vanilla JavaScript로 작성되었습니다. 출처 : JavaScript를 사용하여 브라우저, 엔진, OS, CPU 및 장치를 감지하는 방법은 무엇입니까?
— 루잔 Baral
— KyleMit

답변:

1688

브라우저의 안정적인 검색을위한 인터넷 검색은 종종 사용자 에이전트 문자열을 확인합니다. 이 방법은 이 값을 스푸핑하는 것이 쉽지 않기 때문에 신뢰할 수 없습니다 . duck-typing하여
브라우저를 감지하는 방법을 작성했습니다 .

확장 기능을 설치하기위한 브라우저 별 지침을 표시하는 등 브라우저 검색 방법이 꼭 필요한 경우에만 사용하십시오. 가능하면 기능 감지를 사용하십시오.

데모 : https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;
스 니펫 확장

신뢰성 분석

이전 방법 렌더링 엔진 (의 특성에 의존 -moz-box-sizing하고 -webkit-transform) 브라우저를 검출한다. 이러한 접두사는 결국 삭제되므로 검색을 더욱 강력하게하기 위해 브라우저 별 특성으로 전환했습니다.

  • Internet Explorer : JScript의 조건부 컴파일 (IE9까지) 및 document.documentMode.
  • Edge : Trident 및 Edge 브라우저에서 Microsoft의 구현은 StyleMedia생성자를 노출합니다 . 트라이던트를 제외하면 Edge가 남습니다.
  • Edge (크롬 기반) : 사용자 에이전트는 끝에 "Edg / [version]"값을 포함합니다 (예 : "Mozilla / 5.0 (Windows NT 10.0; Win64; x64)) AppleWebKit / 537.36 (Gcko와 같은 KHTML) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
  • Firefox : 애드온을 설치하는 Firefox의 API : InstallTrigger
  • Chrome : chrome문서화 된 chrome.webstore객체를 포함하여 여러 속성이 포함 된 전역 객체입니다.
  • chrome.webstore최신 버전에서는 업데이트 3 이 더 이상 사용되지 않고 정의되지 않았습니다.
  • Safari : 생성자의 이름을 지정하는 고유 한 이름 지정 패턴입니다. 이것은 나열된 모든 속성 중 가장 내구성이 떨어지는 방법이며 무엇을 추측합니까? Safari 9.1.3에서는 수정되었습니다. 따라서 SafariRemoteNotification버전 7.1 이후에 도입 된을 (를) 확인하여 3.0 이상의 모든 Safari를 포함합니다.
  • Opera : window.opera수년간 존재했지만 Opera가 엔진을 Blink + V8 (Chromium에서 사용)로 교체하면 삭제 됩니다.
  • 업데이트 1 : Opera 15가 출시 되었으며 UA 문자열은 Chrome처럼 보이지만 "OPR"이 추가되었습니다. 이 버전에서는 chrome객체가 정의되지만 chrome.webstore그렇지 않습니다. Opera는 Chrome 복제를 시도하기 때문에이 목적으로 사용자 에이전트 스니핑을 사용합니다.
  • 업데이트 2 : Opera 20+ (상록) !!window.opr && opr.addons를 감지하는 데 사용할 수 있습니다 .
  • 깜박임 : Google이 Chrome 28 CSS.supports() 을 켠 후 깜박임에 도입되었습니다. 물론 오페라에서 사용되는 것과 같은 깜박임입니다.

다음에서 성공적으로 테스트되었습니다.

  • 파이어 폭스 0.8-61
  • 크롬 1.0-71
  • 오페라 8.0-34
  • 사파리 3.0-10
  • IE 6-11
  • 가장자리-20-42
  • 에지 개발-80.0.361.9

9.1.3 이상의 Safari 브라우저 감지 기능을 포함하도록 2016 년 11 월에 업데이트되었습니다.

크롬, 파이어 폭스 IE 및 엣지에서 최신의 성공적인 테스트를 업데이트하기 위해 2018 년 8 월에 업데이트되었습니다.

크롬 감지를 수정하고 (window.chrome.webstore 지원 중단으로 인해) Chrome에서 최신의 성공적인 테스트를 포함하도록 2019 년 1 월에 업데이트되었습니다.

Chromium 감지 (@Nimesh 주석 기반)를 기반으로 Edge를 추가하도록 2019 년 12 월에 업데이트되었습니다.

— Rob W
소스
5
참고로 window.chrome.webstore정의되지 않은 Chrome 확장 프로그램에서는 작동하지 않습니다 . Firefox 확장 프로그램으로 확인하지 않았습니다. is.js다른 곳에서 언급 한 것은 Chrome 및 Firefox 확장 모두에서 작동합니다.
— nevf
60
isSafariSafari 10에서는 작동하지 않습니다. 나는 이것이 나쁜 해결책이라고 주장 할 것입니다 (좋은 것이 아닙니다). 확인한 사항이 제거되지 않거나 다른 브라우저에서 추가되지 않을 것이라는 보장은 없습니다. Safari를 확인하기 위해이 코드를 사용하는 모든 사이트는 macOS Sierra 또는 Safari 10 업그레이드로
— 중단되었습니다.
10
그러나 이것은 데스크톱 버전 뿐만 아니라 해당 브라우저 의 모바일 버전 에서도 테스트 되었습니까? 사실, 플랫폼마다 다른 모바일 버전과 다른 데스크톱 버전이 있습니다. 실제로 firefox에는 Windows, Linux, Mac OS 용 3 개의 바이너리와 Android 및 iOS 용 2 개의 바이너리가 있습니다.
— DrZ214
3
현재 Safari 10.1.2에서 isSafari작동하지 않습니다<iframe>
— Mikko Ohtamaa
23
window.chrome.webstore는 Chrome 버전부터 더 이상 사용되지 않습니다. 71 : blog.chromium.org/2018/06/…
— st_bk
133

브라우저 버전을 확인하는 방법은 다음과 같습니다.

    <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    function myFunction() { 
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) 
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      alert('IE'); 
    }  
    else 
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

그리고 IE 브라우저 버전 만 알아야한다면 아래 코드를 따르십시오. 이 코드는 IE6 ~ IE11 버전에서 잘 작동합니다.

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {               

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>
— 니 메시
소스
3
왜 이렇게 많은 코드 줄을 쓸까요? userAgent가 모호합니다.
— igaurav
5
Microsoft Edge는 어떻습니까?
— user6031759
3
위의 답변은 사파리를 확인하기 전에 크롬을 확인합니다. safari는 chromeuseragent에 키워드 가 없기 때문 입니다. 사파리 사용자 에이전트의 예 -mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
— Golak 아니라 Sarangi
11
Stackoverflow는이 방법을 사용합니다
— vityavv
3
Opera (최신 버전)에서 이것을 테스트하면 'Chrome'이 반환됩니다. 이 문제를 해결하려면, 나는 오페라를 변경 한 경우 문 :if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
— 카일 Vassella
60

나는 그것을 위해 lib를 사용하는 것이 과잉 일 수 있다는 것을 알고 있지만 스레드를 풍부하게하기 위해 is.js 방법을 확인할 수 있습니다 .

is.firefox();
is.ie(6);
is.not.safari();
— 라파엘 아이 옹
소스
9
후드 아래에서 주로 User-Agent 감지를 수행한다는 점에 주목할 가치가 있습니다. 장소에서 공급 업체 감지 / 일부 기능 감지가 보완됩니다.
— TygerKrash
1
@TygerKrash 확실히, 당신은 절대적으로 맞습니다. 그것이 실제로 내 대답의 의미입니다. 소스 코드를 열고 is.js어떻게하는지 확인하십시오.
— Rafael Eyng
4
jQuery는 비슷한 속성을 포함하는 데 사용되었습니다 : $ .browser.msie ... 버전 1.9에서 제거되었습니다 api.jquery.com/jquery.browser
— Riga
@ RafaelEyng : User-Agent 감지와 관련된 문제는이 방법이 신뢰할 수 없다는 것입니다.
— HoldOffHunger
이것은 UA 문자열이 수정되지 않았다고 가정 할 때 가장 강력한 방법입니다. 또한 OS (android, win, mac, linux)를 올바르게 감지합니다. 기기 유형 (데스크톱, 태블릿, 모바일). 또한 브라우저 버전을 테스트 할 수도 있습니다.
— kashiraja
51

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

lancedikson의 Bowser -4,065 ★ s-마지막 업데이트 날짜 : 2019 년 10 월 2 일-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.7.0/es5.js"></script>
스 니펫 확장

* Chromium 기반 Edge 지원

bestiejs의 Platform.js -2,550 ★ s-마지막 업데이트 날짜 : 2019 년 4 월 14 일-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 스타일 질문을 유발 해야합니다 . 브라우저 감지는 실제로 사용자 지정된 이미지, 다운로드 파일 또는 개별 브라우저에 대한 지침을 제공하기위한 것입니다.

추가 자료

— 카일 미트
소스
1
바퀴를 재발 명하지 않기 위해 몇 킬로바이트의 오버 헤드 가치가 있습니다.
— 글리프
46

누군가이 기능이 유용하다고 생각되면 Rob W의 대답 을 여러 변수가 떠있는 대신 브라우저 문자열을 반환하는 함수로 만들었습니다 . 브라우저는 다시로드하지 않고 실제로는 변경할 수 없으므로 다음에 함수를 호출 할 때 결과를 해결할 필요가 없도록 결과를 캐시했습니다.

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());
스 니펫 확장

— 의지
소스
2
Edge 브라우저에서 Chrome
— Riz
2
@ eFriend 최신 브라우저 테스트에 대한 답변을 업데이트했습니다.
— pilau
4
나는 이것을 좋아하지만 "모름"대신 userAgent ()에 대한 대체를 선호했을 것입니다.
— HoldOffHunger
2
window.chrome.webstoreChrome 71에서 속성 이 제거되었으므로이 방법은 더 이상 작동하지 않습니다.
— Bedla
간단히 cachedResult를 반환하고 if 문을 생략하는 함수로 함수를 덮어 쓸 수 있습니다. 처음으로 결과를 반환해야합니다. 브라우저 = function () {return cachedResult}; 캐시 된 결과 반환;
— Timar Ivo Batis
22

짧은 변형

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/i): return "edge";
        case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
        case test(/chrome/i) && !!window.chrome: return "chrome";
        case test(/trident/i): return "ie";
        case test(/firefox/i): return "firefox";
        case test(/safari/i): return "safari";
        default: return "other";
    }
})();
console.log(browser)
스 니펫 확장

— 알렉스 니 쿨린
소스
당신이 나를 싫어한다면, 이유를 설명하십시오.
— Alex Nikulin
2
ios에서 'chrome'으로 탐색하는 동안 'safari'가 표시됩니다
— Reza
11

다음은 Microsoft Edge 및 깜박임 감지를 포함하여 2016 년 Rob의 답변 수정 버전입니다.

( 편집 : 위의 정보로 Rob의 답변을 업데이트했습니다.)

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);
스 니펫 확장

이 접근 방식의 장점은 브라우저 엔진 속성에 의존하므로 Yandex 또는 Vivaldi와 같은 파생 브라우저도 포함하며 엔진을 사용하는 주요 브라우저와 실질적으로 호환됩니다. 단, 사용자 에이전트 스니핑에 의존하는 Opera는 예외입니다. 그러나 오늘날 (즉, 버전 15 이상) Opera 자체도 Blink의 셸일뿐입니다.

— 필라프
소스
!!window.MSAssertion;시험은 원격 데스크톱을 통해 에지 베타 나를 위해 작동하지 않습니다. false를 반환합니다.
— NoR
@NoR 어떤 버전의 Edge를 사용하고 있습니까? 그것은 중요하다
— pilau
1
@NoR 오 당신은 VM을 사용하고 있습니다 ... MSAssertion트릭은 버전 25로 조정되었습니다. 그러나 많은 개발자들이 VM에 의존하기 때문에이 이전 버전을 조정하려고 시도합니다. 잘 했어 감사.
— pilau
1
@NoR 업데이트 됨-미래에 대비해야합니다. StyleMedia(대문자) 객체는 IE와 가장자리에 고유 어디서나가는 것 같지 않습니다.
— pilau
1
또한 UAParser 는 여전히 유지 관리되고 매우 정확하고 사용하기 쉬운 js 플러그인을 발견 했습니다 .
— Issac 게이블
9

당신은 사용할 수 있습니다 try및 catch다른 브라우저 오류 메시지를 사용 할 수 있습니다. IE와 가장자리가 섞여 있었지만 Rob W의 오리 타이핑을 사용했습니다 (이 프로젝트를 기반으로 https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};
— 메이슨 존스
소스
"창"이나 "탐색기"개체가 필요하지 않습니다.
— Vadim
내 제안은 문서와 창을 완전히 제거하는 것입니다. IE 청크 참조 : return "firefox"; } else if (err.search ( "[object Error]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } else if (err.search ( "e를 객체로 변환 할 수 없습니다")! == -1) {return "opera";
— Vadim
이것이 IE와 Edge를 어떻게 차별화합니까?
— 메이슨 존스
이상합니다. 더 이상 err.search ( "[object Error]")를 재생할 수 없습니다. 어쨌든, 파이어 폭스 대 크롬 대 다른 것만으로 충분합니다. 창과 문서 개체를 사용할 수없는 PAC 파일에서 사용합니다.
— Vadim
원인을 알아 냈어 PAC 파일을 즐기기 위해 Windows 7은 내 컴퓨터에 설치된 IE11을 사용하지 않고 IE7과 같은 엔진 (아마도 Windows 호스트에서)을 사용합니다. 따라서 err.toString ()에는 "[object Error]"가 있으며 IE11에는 코드에서와 같이 "Property ...을 가져올 수 없습니다 ..."문자열이 있습니다. 따라서 위의 코드는 IE7에서 실패해야합니다.
— Vadim
8

모두 감사합니다. Chrome 55, Firefox 50, IE 11 및 Edge 38의 최신 브라우저에서 코드 스 니펫을 테스트했으며 모두 나에게 도움이되는 다음 조합을 생각해 냈습니다. 나는 그것이 향상 될 수 있다고 확신하지만, 필요한 사람에게는 빠른 해결책입니다.

var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

브라우저 이름으로 HTML에 CSS 클래스를 추가합니다.

— dnns
소스
iOS에서 크롬을 테스트 했습니까?
— Vic
8

그것이 누구에게나 유용한 지 모르겠지만 여기에 TypeScript를 행복하게 만드는 변형이 있습니다.

export function getBrowser() {

// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
}

// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
    return 'firefox';
}

// Safari 3.0+ "[object HTMLElementConstructor]" 
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
    return 'safari';
}

// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
    return 'edge';
}

// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
    return 'chrome';
}

// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
    return 'blink';
}

}

— 토니 스미스
소스
조건이 "false"인 if가있는 이유는 무엇입니까?
— Yonatan Nir
@YonatanNir 조건부 컴파일을 감지하는 것으로 생각됩니다. developer.mozilla.org/en-US/docs/Web/JavaScript/…
— Lucas Azevedo
5

데스크톱 및 모바일에서 브라우저 감지 : Edge, Opera, Chrome, Safari, Firefox, IE

@nimesh 코드를 약간 변경했는데 Edge에서도 작동하고 Opera 문제가 수정되었습니다.

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

감사합니다 @nimesh 사용자 : 2063564

— 이르 샤드 칸
소스
4

모든 인기있는 브라우저에서 작동하는 덜 "해킹 된"방법도 있습니다. Google은 폐쇄 라이브러리 에 브라우저 확인 기능을 포함 시켰습니다 . 특히, 한 번 봐 가지고 goog.userAgent와 goog.userAgent.product. 이런 식으로 브라우저가 표시하는 방식에 변화가 생겼을 경우에도 항상 최신 상태입니다 (항상 최신 버전의 클로저 컴파일러를 실행하는 경우).

— 앨버트
소스
여기에있는 대부분의 답변은 그들이 유일하게 신뢰할 수있는 방법이라면 "해킹"에 관심이 없습니다. 여러 번 언급 한 userAgent는 쉽게 스푸핑되므로 신뢰할 수 없습니다.
— HoldOffHunger
4

특정 브라우저의 숫자 버전이 무엇인지 알아야하는 경우 다음 스 니펫을 사용할 수 있습니다. 현재 Chrome / Chromium / Firefox의 버전을 알려줍니다.

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
— 발레라 투 마쉬
소스
2

UAParser 는 userAgent 문자열에서 브라우저, 엔진, OS, CPU 및 장치 유형 / 모델을 식별하는 경량 JavaScript 라이브러리 중 하나입니다.

사용 가능한 CDN이 있습니다. 여기에는 UAParser를 사용하여 브라우저를 감지하는 예제 코드가 포함되어 있습니다.

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

이제의 값을 사용 result.browser하여 조건부로 페이지를 프로그래밍 할 수 있습니다 .

소스 자습서 : JavaScript를 사용하여 브라우저, 엔진, OS, CPU 및 장치를 감지하는 방법은 무엇입니까?

— 루잔 바랄
소스
3
천 줄의 코드는 경량 전화?
— deathangel908
1 
var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});
— Neel Upadhyay
소스
0

이것은 Rob의 원래 답변과 2016 년 Pilau의 업데이트를 결합합니다.

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
— 조 보그
소스
사용중인 브라우저를 사용자에게 알려주는 요점이 있습니까? 나는 그들이 이미 이것을 알고 있다고 생각합니다.
— HoldOffHunger
1
@HoldOffHunger 가장 사용 목적은 사용중인 브라우저를 사용자에게 알리지 않고 가장 호환되는 코드를 활성 브라우저에 맞추는 것이 었습니다. 그들이 사용하는 브라우저가 최신 버전이 아니며 역전 호환성에서 제외되지 않는 한, 사용자가 최신 버전으로 전환하면 더 나은 경험을 통해 혜택을 누릴 수 있음을 사용자에게 알리기 위해 상처를 입지 않습니다.
— Joe Borg
0

여기에서 어떤 브라우저가 실행 중인지 확인할 수 있습니다.

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }
— 에이제이 쿠마르
소스
0

우리는 아래의 util 메소드를 사용할 수 있습니다

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };
— NPE
소스
0 
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
— 란다이다
소스
불행히도 좋은 대답이 아닙니다. Edge의 userAgent 메시지에 Chrome이 있습니다. !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime)를 사용하는 것이 좋습니다.;
— Przemo
-3

간단한 한 줄의 JavaScript 코드는 브라우저 이름을 제공합니다.

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
— 니 라브 메타
소스
16
userAgent만으로는 충분하지 않습니다. 예를 들어, 내 사용자 에이전트는 "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (Kcko, Gecko) Chrome / 45.0.2454.85 Safari / 537.36"이며 Mozilla, Chrome 및 Safari를 언급합니다. 어떤 브라우저 유형입니까?
— eremzeit
죄송하지만 "어떤 브라우저 유형을 사용합니까?" 당신이 원하는 것?
— Nirav Mehta
1
@NiravMehta 그가 의미하는 바 navigator.userAgent는 가능한 모든 브라우저 를 알려주는 것입니다. 따라서 이것이 실제로 신뢰할 수없는 것은 사용자가 브라우저를 하나만 가지고있는 경우에만 작동합니다.
— Baldráni
1
이것은 브라우저를 감지하는 신뢰할 수있는 방법이 아닙니다. 일부 사용자 에이전트에는 크롬과 사파리가 모두 포함되어 있으므로 어떤 에이전트를 고려해야하고 마지막으로 감지해야하는지 감지 할 수는 없지만 웹 페이지에서 사용자 에이전트를 수정할 수는 없습니다.
— Juvenik
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.