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

Question

У меня есть 5 дополнений/расширений для браузеров Firefox, Chrome, Internet Explorer (IE), Opera и Safari.

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

Answer 1

Вы можете использовать следующий способ, чтобы определить, какой браузер используется:

function myFunction() {
  if ((navigator.userAgent.indexOf("Opera") !== -1 || navigator.userAgent.indexOf('OPR') !== -1)) {
    alert('Opera');
  } else if (navigator.userAgent.indexOf("Edg") !== -1) {
    alert('Edge');
  } 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)) { // Если IE > 10
    alert('IE');
  } else {
    alert('unknown');
  }
}

<!DOCTYPE html>
<html>
<body>
  <p>Какое название вашего браузера?</p>
  <button onclick="myFunction()">Попробовать</button>
  <p id="demo"></p>
</body>
</html>

Если вам нужно получить только версию браузера Internet Explorer, вы можете использовать следующий код. Он хорошо работает для версий IE6 до IE11:

function getInternetExplorerVersion() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");
  var rv = -1;

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { // Если Internet Explorer, возвращаем номер версии
    if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
      // Для 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('другой браузер');
      }
    } else {
      // Для IE < 11
      alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    return false;
  }
}

<!DOCTYPE html>
<html>
<body>
  <p>Нажмите кнопку "Попробовать", чтобы проверить версию браузера IE.</p>
  <button onclick="getInternetExplorerVersion()">Попробовать</button>
  <p id="demo"></p>
</body>
</html>

Эти примеры кода помогут вам определить браузер, а также его версию для Internet Explorer.

Answer 2

Краткий ответ (обновление 10 июля 2020 - исправление обнаружения мобильных браузеров)

Вы можете использовать следующий код для определения браузера на JavaScript:

var browser = (function() {
    var test = function(regexp) { return regexp.test(window.navigator.userAgent); }
    switch (true) {
        case test(/edg/i): return "Microsoft Edge";
        case test(/trident/i): return "Microsoft Internet Explorer";
        case test(/firefox|fxios/i): return "Mozilla Firefox";
        case test(/opr\//i): return "Opera";
        case test(/ucbrowser/i): return "UC Browser";
        case test(/samsungbrowser/i): return "Samsung Browser";
        case test(/chrome|chromium|crios/i): return "Google Chrome";
        case test(/safari/i): return "Apple Safari";
        default: return "Other";
    }
})();
console.log(browser);

Версия на TypeScript:

Если вам необходимо реализовать это на TypeScript, вот пример:

export enum BROWSER_ENUM {
  EDGE,
  INTERNET_EXPLORER,
  FIRE_FOX,
  OPERA,
  UC_BROWSER,
  SAMSUNG_BROWSER,
  CHROME,
  SAFARI,
  UNKNOWN,
}

const testUserAgent = (regexp: RegExp): boolean => regexp.test(window.navigator.userAgent);

function detectBrowser(): BROWSER_ENUM {
  switch (true) {
    case testUserAgent(/edg/i): return BROWSER_ENUM.EDGE;
    case testUserAgent(/trident/i): return BROWSER_ENUM.INTERNET_EXPLORER;
    case testUserAgent(/firefox|fxios/i): return BROWSER_ENUM.FIRE_FOX;
    case testUserAgent(/opr\//i): return BROWSER_ENUM.OPERA;
    case testUserAgent(/ucbrowser/i): return BROWSER_ENUM.UC_BROWSER;
    case testUserAgent(/samsungbrowser/i): return BROWSER_ENUM.SAMSUNG_BROWSER;
    case testUserAgent(/chrome|chromium|crios/i): return BROWSER_ENUM.CHROME;
    case testUserAgent(/safari/i): return BROWSER_ENUM.SAFARI;
    default: return BROWSER_ENUM.UNKNOWN;
  }
}

export const BROWSER: BROWSER_ENUM = detectBrowser();

export const IS_FIREFOX = BROWSER === BROWSER_ENUM.FIRE_FOX;

Функциональный алгоритм, просто для развлечения:

Если хотите, можно использовать более компактную функциональную версию:

var BROWSER = new Array(
    ["Microsoft Edge", /edg/i],
    ["Microsoft Internet Explorer", /trident/i],
    ["Mozilla Firefox", /firefox|fxios/i],
    ["Opera", /opr\//i],
    ["UC Browser", /ucbrowser/i],
    ["Samsung Browser", /samsungbrowser/i],
    ["Google Chrome", /chrome|chromium|crios/i],
    ["Apple Safari", /safari/i],
    ["Unknown", /.+/i],
).find(([, value]) => value.test(window.navigator.userAgent)).shift();

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

Answer 3

Конечно, вот перевод вашего кода на русский язык в стиле ответа на StackOverflow:

Не уверен, будет ли это полезно кому-то, но вот вариант, который удовлетворит требования 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
    if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
        return 'blink';
    }
}

Этот код позволяет определить браузер, на котором запущено приложение. Он проверяет различные условия, характерные для таких браузеров, как Opera, Firefox, Safari, Internet Explorer, Edge и Chrome. Надеюсь, это поможет кому-то, кто ищет способ идентификации браузера в TypeScript!

Answer 4

Спасибо всем. Я протестировал приведенные здесь фрагменты кода в последних версиях браузеров: 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 )) // Если IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

Этот код добавляет класс CSS к тегу HTML с названием браузера.

Answer 5

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

Этот код создает функцию getBrowser, которая пытается получить доступ к свойству width неопределенного объекта. В зависимости от типа ошибки, выбрасываемой браузером, функция возвращает строку с названием браузера. Это простой способ определения браузера, но имейте в виду, что такой метод не является 100% надежным и может не сработать в будущих версиях браузеров.

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

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных