Как определить браузер Safari, Chrome, IE, Firefox и Opera?

823

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

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

FrankC
источник
2
попробуйте Detejs, он может быть использован для всех браузеров
чувак
1
Возможный дубликат определения браузера в JavaScript?
Matthijs Wessels
2
Detective.js больше не поддерживается (согласно github.com/darcyclarke/Detect.js ), они рекомендуют github.com/lancedikson/bowser
YakovL
Я использовал UAParser Plugin, он написан на Vanilla JavaScript. Источник: Как определить браузер, движок, ОС, процессор и устройство, используя JavaScript?
Лузан Барал

Ответы:

1689

Поиск в Google для надежного обнаружения в браузере часто приводит к проверке строки агента пользователя. Этот метод не надежен, потому что подделать это значение тривиально.
Я написал метод для обнаружения браузеров по типу утки .

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

Демо: 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;

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

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

  • Internet Explorer: условная компиляция JScript (до IE9) и document.documentMode.
  • Edge: В браузерах Trident и Edge реализация Microsoft предоставляет StyleMediaконструктор. Исключение Трайдента оставляет нас с Эджем
  • Edge (на основе хрома): пользовательский агент включает в себя значение «Edg / [версия]» в конце (например: «Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
  • 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
  • Опера 8,0 - 34
  • Safari 3.0 - 10
  • IE 6 - 11
  • Край - 20-42
  • Edge Dev - 80.0.361.9

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

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

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

Обновлен в декабре 2019 года для добавления Edge на основе обнаружения Chromium (на основе комментария @Nimesh).

Rob W
источник
5
К вашему сведению: Это не работает с расширениями Chrome, поскольку window.chrome.webstoreздесь не определено. Не проверял это с помощью расширений Firefox. is.jsупомянутое в другом месте работает как в Chrome, так и в Firefox Extensions.
Nvf
60
isSafariне работает с Safari 10. Я собираюсь доказать, что это плохое решение (не то, чтобы у меня было хорошее). Нет гарантии, что многие из проверок не будут удалены ИЛИ не будут добавлены другими браузерами. Каждый сайт, который использовал этот код для проверки Safari, просто ломался с обновлениями MacOS Sierra или Safari 10 :(
gman
10
Но было ли это проверено на мобильных версиях этих браузеров, а также на настольных версиях ? И, честно говоря, существуют разные мобильные версии и разные версии для настольных компьютеров. На самом деле Firefox имеет 3 двоичных файла для Windows, Linux, Mac OS и 2 двоичных файла для Android и iOS.
DrZ214
3
Ток isSafariне работает под <iframe>Safari 10.1.2
Микко Охтамаа,
23
window.chrome.webstore устарела, начиная с версии Chrome. 71: blog.chromium.org/2018/06/…
st_bk
133

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

    <!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 Browser, вы можете следовать приведенному ниже коду. Этот код хорошо работает для версии 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>
Nimesh
источник
3
Зачем писать столько строк кода? userAgent неоднозначен.
igaurav
5
Как насчет Microsoft Edge?
user6031759 15.06.16
3
ответ выше проверяет хром перед проверкой на сафари. потому что сафари не будет иметь chromeключевое слово в useragent. Пример сафари UserAgent -mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
Golak Sarangi
11
Stackoverflow использует этот метод
vityavv
3
При тестировании этого в Opera (последняя версия) для меня возвращается Chrome. Чтобы это исправить, я изменил оператор Opera if на:if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Кайл Васселла
60

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

is.firefox();
is.ie(6);
is.not.safari();
Рафаэль Эйнг
источник
9
Сразу стоит отметить, что под капотом в первую очередь происходит обнаружение User-Agent. Дополнено определением продавцов / обнаружением некоторых мест.
TygerKrash
1
@ TygerKrash уверен, вы абсолютно правы. Вот что я имел в виду в своем ответе: откройте исходный код is.jsи проверьте, как они это делают.
Рафаэль Эйнг
4
jQuery раньше включал в себя похожие свойства: $ .browser.msie ... были удалены из версии 1.9 api.jquery.com/jquery.browser
Рига,
@RafaelEyng: Я думаю, что проблема с определением User-Agent заключается в том, что этот метод ненадежен.
HoldOffHunger,
Это, безусловно, самый надежный подход, если предположить, что строка UA не была изменена. Он также правильно определяет ОС (Android, Win, Mac, Linux); тип устройства (настольный, планшетный, мобильный). Он также может проверить версию браузера.
Кашираджа
51

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

Bowser от lancedikson - 4 065 ★ s - последнее обновление 2 октября 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>

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


Platform.js от bestiejs - 2,550 ★ s - последнее обновление 14 апреля 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>

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

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

KyleMit
источник
1
Хорошо стоит несколько килобайт накладных расходов, чтобы не изобретать велосипед.
глиф
46

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

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

willsquire
источник
2
в браузере Edge возвращается Chrome
Riz
2
@eFriend Я обновил ответ на последние тесты браузера.
плов
4
Мне это нравится, но я бы предпочел откат для userAgent (), а не «Не знаю».
HoldOffHunger
2
Свойство window.chrome.webstoreбыло удалено в Chrome 71, поэтому этот подход больше не работает.
Бедла
Вы можете переписать функцию с помощью функции, которая просто возвращает cachedResult и опускает оператор if. В первый раз вы все равно должны вернуть результат. browser = function () {return cachedResult}; return cachedResult;
Тимар Иво Батис
22

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

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)

Алекс Никулин
источник
Если вы не любите меня, пожалуйста, объясните, почему.
Алексей Никулин,
2
это покажет «сафари» при просмотре с «Chrome» на IOS
Реза
11

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

плов
источник
!!window.MSAssertion;Тест не работает для меня в пограничных бета через удаленный рабочий стол. Возвращает ложь.
No
@NoR Какую версию Edge вы используете? Это важно
плов
1
@NoR О, вы используете виртуальную машину ... MSAssertionТрюк настроен на версию 25. Но так как многие разработчики полагаются на виртуальные машины, я постараюсь настроить эту старую версию. Хороший звонок. Спасибо.
плов
1
@NoR Обновлено - должно быть будущее. Объект StyleMedia(с большой буквы) специфичен для IE и Edge и, похоже, никуда не денется.
Пилау
1
Я также нашел UAParser js-плагин, который до сих пор поддерживается и имеет высокую точность и простоту использования.
Иссак Гейбл
9

Вы можете использовать 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;
        }
    }
};
Мейсон Джонс
источник
Это отличная идея: вам не нужны ни «оконные», ни «навигаторные» объекты!
Вадим
Я предлагаю полностью избавиться от документа и окна. Смотрите IE chunk: return "firefox"; } else if (err.search ("[ошибка объекта]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } else if (err.search ("не может конвертировать e в объект")! == -1) {return "opera";
Вадим

Как это различает IE и край?
Мейсон Джонс

Странно, я больше не могу воспроизвести err.search ("[Ошибка объекта]"). Во всяком случае, для меня Firefox против Chrome против чего-то еще достаточно. Я использую его в файле PAC, где объекты окна и документа недоступны.
Вадим

Просто выяснил причину. Похоже, что для работы с PAC-файлом Windows 7 не использует IE11, который установлен на моей машине, а скорее как IE7-подобный движок (вероятно, с хоста Windows). Таким образом, err.toString () выдает «[Ошибка объекта]», а внутри IE11 выдает строку «Невозможно получить свойство ...», как в вашем коде. Таким образом, приведенный выше код не должен работать с IE7.
Вадим

8

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


ты тестировал хром на ios?
Вик

8

Понятия не имею, полезно ли это кому-то, но вот вариант, чтобы сделать 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';
}

}

Тони Смит
Почему у вас есть некоторые if с «false» в качестве условия?
Йонатан Нир
@YonatanNir Я думаю, что он предназначен для обнаружения условной компиляции: developer.mozilla.org/en-US/docs/Web/JavaScript/…
Лукас Азеведо,
Большинство ответов здесь не касаются того, чтобы быть «взломанным», если они являются единственным надежным методом. UserAgent, как отмечалось несколько раз, легко подделывается и поэтому ненадежен.
HoldOffHunger
3
а тысячи строк кода , вы называете легкий?
deathangel908
Есть ли смысл сообщать пользователю, какой браузер он использует? Я предполагаю, что они уже знали бы это.
HoldOffHunger
1
@HoldOffHunger его главная цель заключалась в том, чтобы адаптировать наиболее совместимый код к активному браузеру, а не информировать пользователя о том, какой браузер он использует. Если браузер, который они используют, не устарел и не был исключен из совместимости с backwars, в котором не мешало бы сообщить пользователю, что он может получить выгоду от лучшего опыта, если он переключится на что-то более современное
Joe Borg
К сожалению, это не очень хороший ответ. Edge имеет Chrome в своем сообщении userAgent. Лучше использовать !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo
16
Один пользовательский агент не говорит нам достаточно. Например, мой пользовательский агент - «Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 45.0.2454.85 Safari / 537.36», в котором упоминаются Mozilla, Chrome и Safari. Какой тип браузера я?
eremzeit
Извините, но я не получил вас за "Какой тип браузера я?" что ты хочешь получить?
Нирав Мехта
1
@NiravMehta Он имел в виду, что он navigator.userAgentсообщает вам обо всех возможных браузерах, которые у вас есть ... Так что это действительно ненадежно, единственный случай, когда он будет работать, - это если у пользователя только один браузер.
Балдрани
1
это не надежный способ обнаружения браузера. Некоторые пользовательские агенты включают в себя как Chrome, так и Safari, поэтому нет способа определить, какой из них следует рассмотреть и использовать, но, что немаловажно, пользовательский агент может быть изменен веб-страницей.
Ювеник
5

Обнаружение браузеров на настольных и мобильных устройствах: 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

Иршад Хан
источник
4

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

Альберт
источник
Большинство ответов здесь не касаются того, чтобы быть «взломанным», если они являются единственным надежным методом. UserAgent, как отмечалось несколько раз, легко подделывается и поэтому ненадежен.
HoldOffHunger
4

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

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
Валера Тумаш
источник
2

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 для условного программирования вашей страницы.

Source Tutorial: Как определить браузер, движок, ОС, процессор и устройство, используя JavaScript?

Лузан Барал
источник
3
а тысячи строк кода , вы называете легкий?
deathangel908
1
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',
   });
});
Нил Упадхьяй
источник
0

Это объединяет как оригинальный ответ Роба, так и обновление Пилау за 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;
Джо Борг
источник
Есть ли смысл сообщать пользователю, какой браузер он использует? Я предполагаю, что они уже знали бы это.
HoldOffHunger
1
@HoldOffHunger его главная цель заключалась в том, чтобы адаптировать наиболее совместимый код к активному браузеру, а не информировать пользователя о том, какой браузер он использует. Если браузер, который они используют, не устарел и не был исключен из совместимости с backwars, в котором не мешало бы сообщить пользователю, что он может получить выгоду от лучшего опыта, если он переключится на что-то более современное
Joe Borg
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

Мы можем использовать ниже используемые методы

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);
    };
NPE
источник
0
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
Landaida
источник
К сожалению, это не очень хороший ответ. Edge имеет Chrome в своем сообщении userAgent. Лучше использовать !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo
-3

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

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}
Нирав Мехта
источник
16
Один пользовательский агент не говорит нам достаточно. Например, мой пользовательский агент - «Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 45.0.2454.85 Safari / 537.36», в котором упоминаются Mozilla, Chrome и Safari. Какой тип браузера я?
eremzeit
Извините, но я не получил вас за "Какой тип браузера я?" что ты хочешь получить?
Нирав Мехта
1
@NiravMehta Он имел в виду, что он navigator.userAgentсообщает вам обо всех возможных браузерах, которые у вас есть ... Так что это действительно ненадежно, единственный случай, когда он будет работать, - это если у пользователя только один браузер.
Балдрани
1
это не надежный способ обнаружения браузера. Некоторые пользовательские агенты включают в себя как Chrome, так и Safari, поэтому нет способа определить, какой из них следует рассмотреть и использовать, но, что немаловажно, пользовательский агент может быть изменен веб-страницей.
Ювеник