Làm cách nào để phát hiện trình duyệt Safari, Chrome, IE, Firefox và Opera?

Tôi có 5 addons / tiện ích mở rộng cho FF, Chrome, IE, Opera và Safari.

Làm cách nào tôi có thể nhận ra trình duyệt người dùng và chuyển hướng (khi đã nhấp vào nút cài đặt) để tải xuống addon tương ứng?

Googling để phát hiện đáng tin cậy trình duyệt thường dẫn đến việc kiểm tra chuỗi Tác nhân người dùng. Phương pháp này không đáng tin cậy, vì nó tầm thường để giả mạo giá trị này.
Tôi đã viết một phương pháp để phát hiện các trình duyệt bằng cách gõ vịt .

Chỉ sử dụng phương pháp phát hiện trình duyệt nếu thực sự cần thiết, chẳng hạn như hiển thị các hướng dẫn dành riêng cho trình duyệt để cài đặt tiện ích mở rộng. Sử dụng tính năng phát hiện khi có thể.

Bản trình diễn: 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;

Phân tích độ tin cậy

Các phương pháp trước đó phụ thuộc vào tính chất của công cụ rendering ( -moz-box-sizingvà -webkit-transform) để phát hiện các trình duyệt. Các tiền tố này cuối cùng sẽ bị loại bỏ, vì vậy để phát hiện mạnh mẽ hơn nữa, tôi đã chuyển sang các đặc điểm dành riêng cho trình duyệt:

• Internet Explorer: Biên dịch có điều kiện của JScript (cho đến IE9) và document.documentMode.
• Edge: Trong trình duyệt Trident và Edge, việc triển khai của Microsoft làm lộ ra hàm StyleMediatạo. Không bao gồm Trident để lại cho chúng ta với Edge.
• Cạnh (dựa trên crom): Tác nhân người dùng bao gồm giá trị "Edg / [phiên bản]" ở cuối (ví dụ: "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 80.0,3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
• Firefox: API của Firefox để cài đặt các tiện ích bổ sung: InstallTrigger
• Chrome: chromeĐối tượng toàn cầu , chứa một số thuộc tính bao gồm một chrome.webstoređối tượng được ghi lại.
• Cập nhật 3 chrome.webstore không được dùng nữa và không được xác định trong các phiên bản gần đây
• Safari: Một kiểu đặt tên độc đáo trong cách đặt tên của các nhà xây dựng. Đây là phương pháp kém bền nhất trong tất cả các thuộc tính được liệt kê và đoán xem? Trong Safari 9.1.3, nó đã được sửa. Vì vậy, chúng tôi đang kiểm tra chống lạiSafariRemoteNotification , được giới thiệu sau phiên bản 7.1, để bao gồm tất cả Safaris từ 3.0 trở lên.
• Opera: window.operađã tồn tại trong nhiều năm, nhưng sẽ bị loại bỏ khi Opera thay thế động cơ của nó bằng Blink + V8 (được sử dụng bởi Chromium).
• Cập nhật 1: Opera 15 đã được phát hành , chuỗi UA của nó trông giống như Chrome, nhưng có thêm "OPR". Trong phiên bản này, chromeđối tượng được xác định (nhưngchrome.webstore không). Vì Opera cố gắng sao chép Chrome, tôi sử dụng tác nhân đánh hơi cho mục đích này.
• Cập nhật 2: !!window.opr && opr.addonscó thể được sử dụng để phát hiện Opera 20+ (thường xanh).
• Blink: CSS.supports() đã được giới thiệu trong Blink sau khi Google bật Chrome 28. Tất nhiên, đó là Blink tương tự được sử dụng trong Opera.

Đã thử nghiệm thành công tại:

• Firefox 0,8 - 61
• Chrome 1.0 - 71
• Opera 8.0 - 34
• Safari 3.0 - 10
• IE 6-11
• Cạnh - 20-42
• Cạnh Dev - 80.0.361.9

Được cập nhật vào tháng 11 năm 2016 để bao gồm phát hiện trình duyệt Safari từ 9.1.3 trở lên

Cập nhật vào tháng 8 năm 2018 để cập nhật các thử nghiệm thành công mới nhất trên chrome, firefox IE và edge.

Được cập nhật vào tháng 1 năm 2019 để sửa lỗi phát hiện chrome (vì sự phản đối của window.chrome.webstore) và bao gồm các thử nghiệm thành công mới nhất trên chrome.

Được cập nhật vào tháng 12 năm 2019 để thêm Edge dựa trên phát hiện Chromium (dựa trên nhận xét @Nimesh).

Bạn có thể thử cách sau để kiểm tra phiên bản Trình duyệt.

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

Và nếu bạn chỉ cần biết phiên bản IE Browser thì bạn có thể làm theo đoạn mã dưới đây. Mã này hoạt động tốt cho phiên bản IE6 đến 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>

Tôi biết có thể là quá mức cần thiết để sử dụng lib cho điều đó, nhưng chỉ để làm phong phú thêm chủ đề, bạn có thể kiểm tra cách is.js để làm điều này:

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

Dưới đây là một số thư viện nổi bật xử lý phát hiện trình duyệt kể từ tháng 12 năm 2019.

Bowser by lancesikson - 4.065 ★ s - Cập nhật lần cuối ngày 2 tháng 10 năm 2019 - 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>

* hỗ trợ Edge dựa trên Chromium

Platform.js bởi bestiejs - 2.550 ★ s - Cập nhật lần cuối ngày 14 tháng 4 năm 2019 - 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>

Trình duyệt jQuery của gabceb - 504 ★ s - Cập nhật lần cuối ngày 23 tháng 11 năm 2015 - 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 (Được lưu trữ) bởi darcyclarke - 522 ★ s - Cập nhật lần cuối ngày 26 tháng 10 năm 2015 - 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>

Phát hiện trình duyệt (được lưu trữ) bởi QuirksMode - Cập nhật lần cuối ngày 14 tháng 11 năm 2013 - 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>

Các đề cập đáng chú ý:

• WhichBrowser - 1.355 ★ s - Cập nhật lần cuối ngày 2 tháng 10 năm 2018
• Modernizr - 23.397 ★ s - Cập nhật lần cuối ngày 12 tháng 1 năm 2019 - Để nuôi một con ngựa được cho ăn, phát hiện tính năng nên đưa ra bất kỳ câu hỏi nào về phong cách canIuse . Phát hiện trình duyệt thực sự chỉ để cung cấp hình ảnh tùy chỉnh, tải xuống tệp hoặc hướng dẫn cho từng trình duyệt.

Đọc thêm

• Stack Overflow - Phát hiện trình duyệt trong JavaScript?
• Stack Overflow - Làm thế nào bạn có thể phát hiện phiên bản của trình duyệt?

Trong trường hợp bất cứ ai thấy điều này hữu ích, tôi đã biến câu trả lời của Rob W thành một hàm trả về chuỗi trình duyệt thay vì có nhiều biến số trôi nổi. Vì trình duyệt cũng không thể thực sự thay đổi mà không tải lại tất cả, tôi đã tạo cho nó bộ đệm kết quả để ngăn không cho nó hoạt động trong lần tiếp theo khi chức năng được gọi.

/**
 * 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());

Biến thể ngắn

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)

Đây là phiên bản điều chỉnh năm 2016 của câu trả lời của Rob, bao gồm Microsoft Edge và phát hiện Blink:

( chỉnh sửa : Tôi đã cập nhật câu trả lời của Rob ở trên với thông tin này.)

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

Cái hay của phương pháp này là nó dựa vào các thuộc tính của trình duyệt, do đó, nó bao gồm cả các trình duyệt phái sinh, như Yandex hoặc Vivaldi, tương thích thực tế với các trình duyệt chính mà chúng sử dụng các công cụ. Ngoại lệ là Opera, dựa trên tác nhân đánh hơi, nhưng ngày nay (tức là từ 15 trở lên), ngay cả Opera cũng chỉ là vỏ bọc cho Blink.

Bạn có thể sử dụng tryvà catchsử dụng các thông báo lỗi trình duyệt khác nhau. IE và edge đã bị xáo trộn, nhưng tôi đã sử dụng cách gõ vịt từ Rob W (dựa trên dự án này tại đây: 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;
        }
    }
};

Cám ơn mọi người. Tôi đã thử nghiệm các đoạn mã ở đây trên các trình duyệt gần đây: Chrome 55, Firefox 50, IE 11 và Edge 38 và tôi đã đưa ra kết hợp sau đây phù hợp với tôi cho tất cả các trình duyệt. Tôi chắc chắn rằng nó có thể được cải thiện, nhưng đó là một giải pháp nhanh chóng cho bất cứ ai cần:

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

Nó thêm một lớp CSS vào HTML, với tên của trình duyệt.

Không biết nó có hữu ích với ai không nhưng đây là một biến thể để làm cho TypeScript hài lòng.

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

}

Phát hiện trình duyệt trên máy tính để bàn và thiết bị di động: Edge, Opera, Chrome, Safari, Firefox, IE

Tôi đã thực hiện một số thay đổi trong mã @nimesh, hiện tại nó cũng đang hoạt động cho Edge và đã khắc phục sự cố 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';
    }
}

Cảm ơn người dùng @nimesh: 2063564

Ngoài ra còn có một phương pháp "hacky" ít hoạt động hơn cho tất cả các trình duyệt phổ biến. Google đã bao gồm kiểm tra trình duyệt trong Thư viện đóng cửa của họ . Đặc biệt, có một cái nhìn goog.userAgentvà goog.userAgent.product. Theo cách này, bạn cũng được cập nhật nếu có gì đó thay đổi theo cách trình duyệt tự trình bày (với điều kiện bạn luôn chạy phiên bản mới nhất của trình biên dịch đóng.)

Nếu bạn cần biết phiên bản số của một số trình duyệt cụ thể là gì, bạn có thể sử dụng đoạn mã sau. Hiện tại, nó sẽ cho bạn biết phiên bản Chrome / Chromium / Firefox:

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

UAParser là một trong những Thư viện JavaScript nhẹ để xác định trình duyệt, động cơ, HĐH, CPU và loại / kiểu thiết bị từ chuỗi userAgent.

Có sẵn CDN. Ở đây, tôi đã bao gồm một mã ví dụ để phát hiện trình duyệt bằng 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>

Bây giờ bạn có thể sử dụng giá trị của result.browserđể lập trình có điều kiện trang của bạn.

Hướng dẫn nguồn: Làm cách nào để phát hiện trình duyệt, động cơ, HĐH, CPU và thiết bị bằng JavaScript?

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

Điều này kết hợp cả câu trả lời ban đầu của Rob và bản cập nhật Pilau cho năm 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;

Ở đây bạn tìm ra trình duyệt nào nó đang chạy.

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


        }

Chúng ta có thể sử dụng các phương thức dưới đây

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

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

Đơn giản, một dòng mã JavaScript sẽ cung cấp cho bạn tên của trình duyệt:

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