Как определить браузер Safari, Chrome, IE, Firefox и Opera? - PullRequest
681 голосов
/ 24 марта 2012

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

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

Ответы [ 20 ]

1483 голосов
/ 24 марта 2012

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

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

  • Firefox 0.8 - 61
  • Chrome 1.0 - 71
  • Opera 8.0 - 34
  • Safari 3.0 - 10
  • IE 6 - 11
  • Edge - 20-42

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

Обновлен в августе 2018 года, чтобы обновить последние успешные тесты Chrome, Firefox IE и Edge.

Обновлен в январе 2019 года, чтобы исправить обнаружение Chrome (из-за устаревания window.chrome.webstore) и включить последниеуспешные испытания на хром.

112 голосов
/ 14 октября 2014

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

    <!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>
58 голосов
/ 13 мая 2015

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

is.firefox();
is.ie(6);
is.not.safari();
42 голосов
/ 17 июля 2015

На случай, если кто-нибудь найдет это полезным, я превратил ответ Роба В. в функцию, которая возвращает строку браузера, вместо того, чтобы плавать вокруг множества переменных.Поскольку браузер также не может измениться без повторной загрузки, я сделал его кеширующим, чтобы предотвратить необходимость его обработки при следующем вызове функции.

/**
 * 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());
28 голосов
/ 31 марта 2018

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

Bowser от lancedikson - 3761 ★ s - Последнее обновление 26 мая 2019 г. - 4,8 КБ

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>

* поддерживает Edge на основе хрома


Platform.js by bestiejs- 2250 ★ с - Последнее обновление 30 октября 2018 г. - 5,9 КБ

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 от gabceb - 504 ★ s - последнее обновление 23 ноября 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 (в архиве) от darcyclarke - 522 ★ s - последнее обновление 26 октября 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>

Обнаружение браузера (в архиве) от 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 - 1355 ★ s - последнее обновление 2 октября,2018
  • Modernizr - 23 397 ★ s - Последнее обновление: 12 января 2019 г. - Чтобы прокормить лошадь, которой кормят, при обнаружении функций должны возникать любые вопросы в стиле canIuse .Обнаружение браузера действительно предназначено только для предоставления настроенных изображений, загрузки файлов или инструкций для отдельных браузеров.

Дальнейшее чтение

11 голосов
/ 17 января 2016

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

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

// 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, которая полагается на сниффинг пользовательского агента, но сегодня (т.е. версия 15 и выше) даже Opera сама по себе является лишь оболочкой для Blink.

10 голосов
/ 23 марта 2018

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

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());
console.log(browser)
8 голосов
/ 31 января 2017

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

7 голосов
/ 25 октября 2016

Вы можете использовать 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;
        }
    }
};
4 голосов
/ 22 марта 2016

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

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