Як виявити веб-переглядач Safari, Chrome, IE, Firefox та Opera?


822

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

Як я можу розпізнати веб-переглядач користувача та перенаправити (після натискання кнопки встановлення) завантажити відповідний додаток?


2
спробуйте detectjs, його можна використовувати для всіх браузерів
чувак


2
detect.js більше не підтримується (відповідно до github.com/darcyclarke/Detect.js ), вони рекомендують github.com/lancedikson/bowser
YakovL

Я використовував плагін UAParser, він написаний на ванільному JavaScript. Джерело: Як виявити браузер, движок, ОС, процесор та пристрій за допомогою JavaScript?
Лузан Барал

Відповіді:


1687

Гуглінг для надійного виявлення браузера часто призводить до перевірки рядка Користувацького агента. Цей метод не є надійним, оскільки неправдиво підробляти це значення.
Я написав метод виявлення браузерів шляхом набору качок .

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

Демо: 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об’єкт.
  • chrome.webstoreВ останніх версіях оновлення 3 застаріле та не визначене
  • 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
  • Сафарі 3,0 - 10
  • IE 6 - 11
  • Край - 20-42
  • Edge Dev - 80.0.361.9

Оновлено в листопаді 2016 року для включення виявлення браузерів Safari від 9.1.3 і вище

Оновлено у серпні 2018 року для оновлення останніх успішних тестів на хром, IE та firefox IE.

Оновлено в січні 2019 року, щоб виправити виявлення хрому (через припинення window.chrome.webstore) та включити останні успішні тести на хром.

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


5
FYI Це не працює з розширеннями Chrome, як window.chrome.webstoreтам не визначено. Не перевіряв це за допомогою розширень Firefox. is.jsзгадане в іншому місці працює як у розширеннях Chrome, так і в Firefox.
nevf

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
Mikko Ohtamaa

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, тоді ви можете слідувати коду нижче. Цей код добре працює для версій 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>

3
Чому б написати стільки рядків коду? userAgent неоднозначний.
ігаурав

5
Що з Microsoft Edge?
користувач6031759

3
відповідь вище перевіряє хром, перш ніж перевірити сафарі. тому що у сафарі не буде chromeключового слова у 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
корисного

11
Stackoverflow використовує цей метод
vityavv

3
Під час тестування цього в Opera (остання версія), це повертає для мене "Chrome". Щоб виправити це, я змінив Opera, якщо заява на:if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Кайл Васселла

60

Я знаю, що використовувати ліб для цього може бути зайвим, але просто для збагачення теми ви можете перевірити спосіб 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); тип пристрою (настільний, планшетний, мобільний). Він також може перевірити версію браузера.
kashiraja

51

Ось декілька видатних бібліотек, які обробляють пошук браузера станом на грудень 2019 року.

Bowser від lancedikson - 4,065 ★ s - Останнє оновлення 2 жовтня 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.7.0/es5.js"></script>

* підтримує Edge на основі Chromium


Platform.js від bestiejs - 2550 ★ s - Останнє оновлення 14 квітня 2019 р. - 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 від gabceb - 504 ★ s - Останнє оновлення 23 листопада 2015 р. - 1,3 КБ

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

Виявлення браузера (заархівовано) 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 . Виявлення браузера насправді лише для надання індивідуальних зображень, завантаження файлів або інструкцій для окремих браузерів.

Подальше читання


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


2
у браузері Edge він повертає Chrome
Riz

2
@eFriend Я оновив відповідь на останні тести браузера.
pilau

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
Reza

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;Тест не працює для мене в прикордонних бета через віддалений робочий стіл. Він повертає помилкове.
NoR

@NoR Яку версію Edge ви використовуєте?
Має

1
@NoR О, ти використовуєш VM ... MSAssertionТрюк налаштовано на версію 25. Але оскільки багато розробників покладаються на VM, я спробую налаштувати цю стару версію. Гарний дзвінок. Дякую.
пілау

1
@NoR Оновлено - має бути захищеним у майбутньому. Об'єкт StyleMedia(з великої літери) специфічний для IE та Edge і, схоже, нікуди не йде.
pilau

1
Я також знайшов UAParser js плагін, який все ще підтримується та є дуже точним та простим у використанні.
Issac Gable

9

Ви можете використовувати tryта catchвикористовувати різні повідомлення про помилки браузера. IE і край були змішані, але я використовував типи качок від 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: повернення "firefox"; } else if (err.search ("[помилка об'єкта]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } else if (err.search ("не вдається перетворити e в об'єкт")! == -1) {return "опера";
Вадим

Як це відрізняє IE від краю?
Мейсон Джонс

Дивно, я більше не можу відтворити err.search ("[error Error]"). У всякому разі, для мене Firefox vs Chrome проти чогось іншого достатньо. Я використовую його у файлі PAC, де об'єкти вікон та документів недоступні.
Вадим

Тільки з'ясував причину. Схоже, що для функціонування файлу PAC Windows 7 не використовує IE11, який встановлюється на моїй машині, а швидше IE7-подібний двигун (ймовірно, з хоста Windows). Отже, err.toString () там дає "[error Error]", а всередині 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';
}

}


Чому у вас є деякі ifs із "false" як умова?
Йонатан Нір

@YonatanNir Я думаю, що це призначено для виявлення умовної компіляції: developer.mozilla.org/en-US/docs/Web/JavaScript/…
Лукас Азеведо

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 щоб умовно запрограмувати свою сторінку.

Підручник з джерелом: Як виявити браузер, двигун, ОС, процесор та пристрій за допомогою 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 головним його наміром було скоріше адаптувати найбільш сумісний код до активного браузера, а не інформувати користувача, який браузер він використовує. Якщо браузер, який він використовує, не застарів і не був виключений із сумісності зворотних війн, в якій не завадить повідомити користувачеві, що може отримати корисні переваги, якщо вони перейдуть на щось більш сучасне
Джо Борг

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

0
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

На жаль, це не гарна відповідь. 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
це не надійний спосіб виявити браузер. Деякі корисні речовини включають в себе як хром, так і сафарі, тому немає способу визначити, який з них слід розглянути, і останнє, але, в останню чергу, корисний засіб може бути змінено веб-сторінкою.
Ювенік
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.