Как обнаружить браузер Safari, Chrome, IE, Firefox и Opera?

У меня есть 5 аддонов / расширений для FF, Chrome, IE, Opera и Safari.

Мне нужен код для распознавания браузера пользователя и перенаправления (при нажатии кнопки "Установить"), чтобы загрузить соответствующий аддон.

565
browser-detection javascript

16 ответов

Googling для надежного обнаружения браузера часто приводит к проверке строки агента пользователя. Этот метод не надежный, потому что это тривиально подделать это значение.
Я написал метод обнаружения браузеров с помощью утка-типирование.

используйте только метод обнаружения браузера, если это действительно необходимо,например, показ инструкций по установке расширения для браузера. используйте обнаружение характеристик когда вероятный.

демо:https://jsfiddle.net/311aLtkz/

// 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+
var isChrome = !!window.chrome && !!window.chrome.webstore;

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

анализ надежности

на предыдущий метод зависело от свойств движка рендеринга (-moz-box-sizing и -webkit-transform) для обнаружения браузера. Эти префиксы в конечном итоге будут удалены, поэтому, чтобы сделать обнаружение еще более надежным, я переключился на характеристики браузера:

  • Internet Explorer: условная компиляция (до IE9) и document.documentMode.
  • Edge: в браузерах Trident и Edge реализация Microsoft предоставляет StyleMedia конструктор. Исключение трезубца оставляет нас с Edge.
  • Firefox: Firefox API для установки дополнений:InstallTrigger
  • Chrome: глобальный chrome объект, содержащий несколько свойств, включая задокументированный chrome.webstore объект.
  • Safari: уникальный шаблон именования в именовании конструкторов. Это наименее долговечный способ из всех перечисленных свойств и угадайте, что? В Safari 9.1.3 это было исправлено. Таким образом, мы проверяем против SafariRemoteNotification, который был введен после версии 7.1, чтобы покрыть все сафари от 3.0 и выше.
  • Опера: window.opera существует уже много лет, но будут удалены когда Opera заменяет свой двигатель на Blink + V8 (используется Chromium).
    • обновление 1: Opera 15 была выпущена, его строка UA выглядит как Chrome, но с добавлением "OPR". В этой версии chrome объект определен (но chrome.webstore нет). Поскольку Opera пытается клонировать Chrome, я использую для этой цели нюхание агента пользователя.
    • обновление 2: !!window.opr && opr.addons может использоваться для обнаружения Опера 20+ (вечнозеленые).
  • Блинк: CSS.supports() был представлен в Blink раз Google включил Chrome 28. Это, конечно, то же самое мерцание, что и в опере.

успешно протестирован в:

  • Firefox 0.8-61
  • хром 1.0 - 68
  • Опера 8.0 - 34
  • Safari 3.0-10
  • т. е. 6 - 11
  • Edge-20-42

Обновлено в ноябре 2016 года, чтобы включить обнаружение браузеров Safari от 9.1.3 и выше

обновление в Август 2018 для обновления последних успешных тестов на chrome, firefox IE и edge.

1283

вы можете попробовать следующий способ проверить версию браузера.

    <!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.);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>
89

Я знаю, что может быть излишним использовать lib для этого, но просто чтобы обогатить поток, вы можете проверить есть.js способ сделать это:

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

в случае, если кто-то найдет это полезным, я сделал ответ Роба 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());
37

Вот 2016 скорректированная версия ответа Роба, включая Microsoft Edge и обнаружение Blink:

(редактировать: я обновил ответ Роба выше с этой информацией.)

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

красота этого подхода заключается в том, что он опирается на свойства движка браузера, поэтому он охватывает даже производные браузеры, такие как Яндекс или Вивальди, которые практически совместимы с основными браузерами, чьи движки они используют. Исключение Opera, которая полагается на нюхание агента пользователя, но сегодня (т. е. ver. 15 и выше) даже опера сама по себе только оболочка для Blink.

11

спасибо всем. Я протестировал фрагменты кода здесь, в последних браузерах: 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 с именем браузера.

8

вот несколько известных библиотек, которые обрабатывают обнаружения браузера.

Баузер от lancedikson-2,713★s-последнее обновление 12 мар. 2018-2.9 KB

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

.js от bestiejs-1912★s-последнее обновление 23 Янв. 2018-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>

обнаружить.js от darcyclarke-501★s-последнее обновление 26 окт. 2015 - 2.9 КБ

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>

браузер jQuery от gabceb-485★s-последнее обновление 23 нояб. 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>

обнаружение браузера (архив) от QuirksMode-последнее обновление 14 нояб. 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>

Заметных Упоминаний:

  • WhichBrowser - 1,230★s-последний обновлено 5 февраля, 2018
  • Modernizr - 22,320★s-последнее обновление 4 марта 2018-чтобы победить мертвую лошадь, обнаружение функций должно управлять любым canIuse вопросы стиля. Обнаружение браузера действительно только для тонкостей.

Более Дальнеишее Чтение

8

можно использовать 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;
        }
    }
};
6

существует также менее "хакерский" метод, который работает для всех популярных браузеров. Google включил браузер-проверьте их Библиотеки Закрытия. В частности, посмотрите на goog.userAgent и goog.userAgent.product. Таким образом, вы также в курсе, если что-то меняется в том, как браузеры представляют себя (учитывая, что вы всегда использовать последнюю версию компилятора.)

4

короткий вариант

    var browser = (function(agent){
        switch(true){
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
4

Если вам нужно знать, что такое числовая версия определенного браузера, вы можете использовать следующий фрагмент. В настоящее время он расскажет вам версию Chrome/Chromium/Firefox:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
3
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',
   });
});
1

этой сочетает в себе оригинальный ответ Роба и обновление 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;
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

UAParser - одна из облегченных библиотек JavaScript для идентификации браузера, движка, ОС, процессора и типа/модели устройства из строки userAgent.

доступен 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?

0

простая, одна строка кода JavaScript даст вам имя браузера:

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