Jak wykryć przeglądarkę Safari, Chrome, IE, Firefox i Opera?

Mam 5 dodatków / rozszerzeń dla FF, Chrome, IE, Opera i Safari.

Jak rozpoznać przeglądarkę użytkownika i przekierować (po kliknięciu przycisku instalacji), aby pobrać odpowiedni dodatek?

Googling w celu niezawodnego wykrywania przeglądarki często powoduje sprawdzenie ciągu agenta użytkownika. Ta metoda nie jest niezawodna, ponieważ fałszowanie tej wartości jest banalne.
Napisałem metodę wykrywania przeglądarek przez pisanie kaczek .

Używaj metody wykrywania przeglądarki tylko wtedy, gdy jest to naprawdę konieczne, na przykład wyświetlając instrukcje dotyczące przeglądarki dotyczące instalacji rozszerzenia. W miarę możliwości korzystaj z funkcji wykrywania.

Demo: 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;

Analiza niezawodności

Poprzednia metoda zależy od właściwości silnika renderowania ( -moz-box-sizingi -webkit-transform) w celu wykrycia przeglądarki. Te prefiksy zostaną ostatecznie usunięte, więc aby uczynić wykrywanie jeszcze bardziej niezawodnym, przełączyłem się na cechy charakterystyczne dla przeglądarki:

• Internet Explorer: Kompilacja warunkowa JScript (do IE9) i document.documentMode.
• Edge: W przeglądarkach Trident i Edge implementacja Microsoftu ujawnia StyleMediakonstruktora. Wyłączenie Trident pozostawia nam Edge.
• Edge (oparty na chromie): Agent użytkownika zawiera na końcu wartość „Edg / [wersja]” (np .: „Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, jak Gecko) Chrome / 80.0.3987.16 Safari / 537,36 Edg / 80.0.361.9 ").
• Firefox: Firefox API do instalowania dodatków: InstallTrigger
• Chrome: chromeobiekt globalny zawierający kilka właściwości, w tym chrome.webstoreobiekt udokumentowany .
• Aktualizacja 3 chrome.webstorejest przestarzała i niezdefiniowana w najnowszych wersjach
• Safari: Unikalny wzorzec nazewnictwa w nazwie konstruktorów. Jest to najmniej trwała metoda ze wszystkich wymienionych właściwości i zgadnij co? W Safari 9.1.3 zostało to naprawione. Sprawdzamy więc SafariRemoteNotification, co zostało wprowadzone po wersji 7.1, aby objąć wszystkie Safari od wersji 3.0 i wyższych.
• Opera: window.operaistnieje od lat, ale zostanie porzucona, gdy Opera zastąpi swój silnik Blink + V8 (używany przez Chromium).
• Aktualizacja 1: Opera 15 została wydana , jej ciąg UA wygląda jak Chrome, ale z dodatkiem „OPR”. W tej wersji chromeobiekt jest zdefiniowany (ale chrome.webstorenie jest). Ponieważ Opera próbuje sklonować Chrome, do tego celu używam wąchania agenta użytkownika.
• Aktualizacja 2: !!window.opr && opr.addonsmoże być używana do wykrywania Opery 20+ (evergreen).
• Blink: CSS.supports() został wprowadzony w Blink, gdy Google włączył Chrome 28. Jest to oczywiście ten sam Blink, który był używany w Operze.

Z powodzeniem przetestowany w:

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

Zaktualizowano w listopadzie 2016 r., Aby obejmował wykrywanie przeglądarek Safari od wersji 9.1.3

Zaktualizowano w sierpniu 2018 r., Aby zaktualizować najnowsze udane testy Chrome, Firefox IE i Edge.

Zaktualizowano w styczniu 2019 r., Aby naprawić wykrywanie chrome (z powodu przestarzałości pliku window.chrome.webstore) i uwzględnić najnowsze udane testy na chrome.

Zaktualizowano w grudniu 2019 roku, aby dodać Edge na podstawie wykrywania Chromium (na podstawie komentarza @Nimesh).

Możesz wypróbować następujący sposób, aby sprawdzić wersję przeglądarki.

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

A jeśli potrzebujesz znać tylko wersję przeglądarki IE, możesz wykonać poniższy kod. Ten kod działa dobrze dla wersji IE6 do 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>

Wiem, że użycie lib może być przesadne , ale aby wzbogacić wątek, możesz sprawdzić, jak to zrobić w is.js :

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

Oto kilka wybitnych bibliotek, które obsługują wykrywanie przeglądarki od grudnia 2019 r.

Bowser autor: lancedikson - 4065 ★ s - Ostatnia aktualizacja 2 października 2019 r. - 4,8 KB

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/[email protected]/es5.js"></script>

* obsługuje Edge oparty na Chromium

Platform.js autor bestiejs - 2550 ★ s - Ostatnia aktualizacja 14 kwietnia 2019 - 5,9 KB

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 autor: gabceb - 504 ★ s - Ostatnia aktualizacja 23 listopada 2015 - 1,3 KB

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 (zarchiwizowany) autor: darcyclarke - 522 ★ s - Ostatnia aktualizacja 26 października 2015 - 2,9 KB

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>

Wykrywanie przeglądarki (zarchiwizowane) przez QuirksMode - Ostatnia aktualizacja 14 listopada 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>

Ważne uwagi:

• WhichBrowser - 1355 ★ s - Ostatnia aktualizacja 2 października 2018 r
• Modernizr - 23 397 ★ s - Ostatnia aktualizacja 12 stycznia 2019 r. - Aby nakarmić karmionego konia, wykrywanie funkcji powinno kierować wszelkimi pytaniami w stylu CanIuse . Wykrywanie przeglądarki jest tak naprawdę tylko w celu dostarczania spersonalizowanych obrazów, pobierania plików lub instrukcji dla poszczególnych przeglądarek.

Dalsza lektura

• Przepełnienie stosu - wykrywanie przeglądarki w JavaScript?
• Przepełnienie stosu - jak wykryć wersję przeglądarki?

Na wypadek, gdyby ktokolwiek uznał to za przydatne, zmieniłem odpowiedź Roba W w funkcję, która zwraca ciąg przeglądarki, a nie wiele zmiennych. Ponieważ przeglądarka nie może się tak naprawdę zmienić bez ponownego ładowania, sprawiłem, że wyniki zostały zapisane w pamięci podręcznej, aby nie musiało to działać przy następnym wywołaniu funkcji.

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

Krótki wariant

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)

Oto wersja odpowiedzi Roba z 2016 roku, w tym Microsoft Edge i wykrywanie Mrugnięcia:

( edytuj : Zaktualizowałem odpowiedź Roba powyższymi informacjami).

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

Piękno tego podejścia polega na tym, że opiera się on na właściwościach silnika przeglądarki, dlatego obejmuje nawet przeglądarki pochodne, takie jak Yandex lub Vivaldi, które są praktycznie kompatybilne z głównymi przeglądarkami, z których korzystają silniki. Wyjątkiem jest Opera, która opiera się na węszeniu agenta użytkownika, ale dziś (tj. Wer. 15 i więcej) nawet Opera sama jest jedynie powłoką dla Blink.

Możesz używać tryi catchużywać różnych komunikatów o błędach przeglądarki. IE i Edge były pomieszane, ale użyłem pisania kaczki z Roba W (na podstawie tego projektu tutaj: 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;
        }
    }
};