js中怎么判断浏览器

在JavaScript中判断浏览器的方法有很多，包括使用navigator.userAgent、navigator.vendor、以及特性检测等。 其中，最常见的方法是通过navigator.userAgent属性来判断浏览器类型。这种方法的核心思想是读取用户代理字符串并从中提取浏览器的相关信息。接下来，我们将详细展开这一方法，并探讨其他有效的判断浏览器的方法。

一、通过`navigator.userAgent`判断浏览器

1、什么是`navigator.userAgent`

navigator.userAgent是一个字符串，包含关于用户代理的相关信息。这个字符串包括了浏览器类型、浏览器版本号、操作系统以及其他一些细节。通过分析这个字符串，我们可以判断当前用户使用的浏览器。

var userAgent = navigator.userAgent;
console.log(userAgent);

2、解析`userAgent`字符串

解析常用浏览器

Chrome
```
function isChrome() {
    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}
```
解释：通过检查userAgent中是否包含Chrome和vendor是否为Google Inc，可以判断是否为Chrome浏览器。
Firefox
```
function isFirefox() {
    return /Firefox/.test(navigator.userAgent);
}
```
解释：通过检查userAgent中是否包含Firefox，可以判断是否为Firefox浏览器。
Safari
```
function isSafari() {
    return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
}
```
解释：通过检查userAgent中是否包含Safari并且vendor为Apple Computer，可以判断是否为Safari浏览器。
Edge
```
function isEdge() {
    return /Edg/.test(navigator.userAgent);
}
```
解释：通过检查userAgent中是否包含Edg，可以判断是否为Edge浏览器。
Internet Explorer
```
function isIE() {
    return /MSIE/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent);
}
```
解释：通过检查userAgent中是否包含MSIE或Trident，可以判断是否为Internet Explorer浏览器。

二、通过`navigator.vendor`判断浏览器

navigator.vendor返回关于浏览器供应商的信息。结合userAgent，可以更准确地判断浏览器类型。

console.log(navigator.vendor);

1、使用`navigator.vendor`和`userAgent`结合判断

Chrome

function isChrome() {
    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}

Safari

function isSafari() {
    return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
}

解释：通过结合userAgent和vendor属性，可以更准确地判断浏览器类型。

三、特性检测

特性检测是一种更可靠的方法，因为它不依赖于用户代理字符串。通过检测浏览器是否支持某些特定的功能，可以判断浏览器类型。

1、检测特定API

检测Edge

function isEdge() {
    return !!window.StyleMedia;
}

解释：Edge浏览器特有的StyleMedia对象可以用于判断是否为Edge。

检测IE

function isIE() {
    return !!document.documentMode;
}

解释：IE浏览器特有的documentMode属性可以用于判断是否为IE。

2、结合特性检测和用户代理

结合两种方法可以提高判断的准确性。

function detectBrowser() {
    if (isIE()) {
        return 'Internet Explorer';
    } else if (isEdge()) {
        return 'Edge';
    } else if (isChrome()) {
        return 'Chrome';
    } else if (isFirefox()) {
        return 'Firefox';
    } else if (isSafari()) {
        return 'Safari';
    } else {
        return 'Unknown';
    }
}
console.log(detectBrowser());

四、使用第三方库

1、介绍第三方库

有很多第三方库可以用来检测浏览器类型，例如Bowser、UAParser.js等。

使用`Bowser`

const bowser = require('bowser');
const browser = bowser.getParser(window.navigator.userAgent);
console.log(browser.getBrowserName());
console.log(browser.getBrowserVersion());

使用`UAParser.js`

const UAParser = require('ua-parser-js');
const parser = new UAParser();
const result = parser.getResult();
console.log(result.browser.name);
console.log(result.browser.version);

解释：通过使用这些第三方库，可以更方便地获取浏览器类型和版本信息。

五、综合判断

在实际应用中，可以结合多种方法来进行综合判断，以提高准确性。

function detectBrowser() {
    if (isIE()) {
        return 'Internet Explorer';
    } else if (isEdge()) {
        return 'Edge';
    } else if (isChrome()) {
        return 'Chrome';
    } else if (isFirefox()) {
        return 'Firefox';
    } else if (isSafari()) {
        return 'Safari';
    } else {
        return 'Unknown';
    }
}
console.log(detectBrowser());

通过以上方法，可以在JavaScript中准确判断浏览器类型。无论是通过navigator.userAgent、navigator.vendor，还是特性检测或第三方库，都可以实现这一目标。根据具体需求选择合适的方法，将有助于提升用户体验和系统兼容性。