programing tip

Safari, Chrome, IE, Firefox 및 Opera 브라우저를 감지하는 방법은 무엇입니까?

itbloger 2020. 9. 30. 08:54
반응형

Safari, Chrome, IE, Firefox 및 Opera 브라우저를 감지하는 방법은 무엇입니까?

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

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

브라우저에서 신뢰할 수있는 검색을 검색하면 종종 사용자 에이전트 문자열을 확인합니다. 이 방법은 이 값을 속이는 것이 사소하기 때문에 신뢰할 수 없습니다 .
나는 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 - 71
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// 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 += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

신뢰성 분석

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

  • Internet Explorer : JScript의 조건부 컴파일 (IE9까지) 및 document.documentMode.
  • Edge : Trident 및 Edge 브라우저에서 Microsoft의 구현은 StyleMedia생성자를 노출합니다 . Trident를 제외하면 Edge가 남습니다.
  • Firefox : 부가 기능을 설치하는 Firefox의 API : InstallTrigger
  • Chrome : chrome문서화 된 chrome.webstore개체를 포함하여 여러 속성을 포함하는 전역 개체입니다.
    • 업데이트 3 chrome.webstore은 더 이상 사용되지 않으며 최신 버전에서 정의되지 않았습니다.
  • 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를 감지하는 데 사용할 수 있습니다 .
  • Blink : Google이 Chrome 28 CSS.supports() 을 켤 때 Blink에 도입되었습니다. 물론 Opera에서 사용 된 것과 동일한 Blink입니다.

성공적으로 테스트 :

  • Firefox 0.8-61
  • Chrome 1.0-71
  • Opera 8.0-34
  • Safari 3.0-10
  • IE 6-11
  • 가장자리-20-42

9.1.3 이상의 Safari 브라우저 감지를 포함하도록 2016 년 11 월 업데이트 됨

2018 년 8 월 업데이트되어 Chrome, Firefox IE 및 Edge에 대한 최신 테스트를 업데이트했습니다.

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

다음과 같은 방법으로 브라우저 버전을 확인할 수 있습니다.

    <!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>

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

is.firefox();
is.ie(6);
is.not.safari();

누군가 이것이 유용하다고 생각하는 경우 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());

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

Bowser 제작자 : lancedikson-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 지원

Platform.js by bestiejs-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>

jQuery Browser by gabceb-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>

Detect.js (보관 됨) 제작자 : darcyclarke-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>

브라우저 감지 (보관 됨) by 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-Last updated Jan 12, 2019-먹이를 먹인 말에게 먹이를 주려면 기능 감지가 canIuse 스타일 질문을 유도해야합니다 . 브라우저 감지는 개별 브라우저에 대한 사용자 정의 이미지, 다운로드 파일 또는 지침을 제공하기위한 것입니다.

추가 읽기

짧은 변형

var browser = (function(){
  var test = function(regexp) { return regexp.test(window.navigator.userAgent);}
  switch(true){
	case test(/edge/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)

다음은 Microsoft Edge 및 Blink 감지를 포함하여 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의 쉘일뿐입니다.

모두 감사합니다. 최근 브라우저 인 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);

브라우저 이름과 함께 CSS 클래스를 HTML에 추가합니다.

당신은 사용할 수 있습니다 try및 catch다른 브라우저 오류 메시지를 사용 할 수 있습니다. IE와 edge가 섞여 있었지만 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;
        }
    }
};

누구에게나 유용할지 모르겠지만 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';
}

}

또한 모든 인기있는 브라우저에서 작동하는 덜 "해키"방법이 있습니다. Google은 클로저 라이브러리 에 브라우저 확인 기능을 포함 시켰습니다 . 특히 goog.userAgent및을 살펴보십시오 goog.userAgent.product. 이러한 방식으로 브라우저가 표시하는 방식에 변경 사항이있는 경우에도 최신 상태를 유지할 수 있습니다 (항상 최신 버전의 클로저 컴파일러를 실행하는 경우).

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

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;

데스크톱 및 모바일에서 브라우저 감지 : 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

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 및 장치를 감지하는 방법은 무엇입니까?

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',
   });
});

const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

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

    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;

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

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")}


        }

아래의 유틸리티 방법을 사용할 수 있습니다.

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);
    };

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

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}

참고 URL : https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser

반응형

'programing tip' 카테고리의 다른 글

C ++ 쌍에 해당하는 것은 무엇입니까?  (0) 2020.10.02
YAML과 JSON의 차이점은 무엇입니까?  (0) 2020.10.02
Windows 배치 파일 : .bat 대 .cmd?  (0) 2020.09.30
개체 목록 섞기  (0) 2020.09.30
값이 목록에 있는지 확인하는 가장 빠른 방법  (0) 2020.09.30

'programing tip'의 다른글

  • 현재글Safari, Chrome, IE, Firefox 및 Opera 브라우저를 감지하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바