如何准确的判断各种浏览器？

1. 基本思路

首先，咱们需要知道不同浏览器有不同的特征，这些特征可以通过 navigator.userAgent 这个属性来获取。这个属性包含了浏览器的版本、操作系统等信息，通过解析这个信息，我们可以识别出大多数主流浏览器。

2. 判断IE浏览器

IE浏览器在用户代理字符串中包含了 "MSIE" 或 "Trident"。咱们可以用以下代码来判断是否为IE浏览器：

function isIE() {
    return /MSIE|Trident/.test(window.navigator.userAgent);
}

console.log(isIE()); // 如果是IE浏览器，这里会输出true

3. 判断FireFox浏览器

FireFox的用户代理字符串中包含了 "Firefox"。判断的方法如下：

function isFirefox() {
    return /Firefox/.test(window.navigator.userAgent);
}

console.log(isFirefox()); // 如果是FireFox浏览器，这里会输出true

4. 判断Opera浏览器

Opera浏览器的用户代理字符串中包含了 "Opera" 或 "OPR"。判断的方法如下：

function isOpera() {
    return /Opera|OPR/.test(window.navigator.userAgent);
}

console.log(isOpera()); // 如果是Opera浏览器，这里会输出true

5. 判断Safari浏览器

Safari浏览器的用户代理字符串中包含了 "Safari" 且不包含 "Chrome"。判断的方法如下：

function isSafari() {
    return /Safari/.test(window.navigator.userAgent) && !/Chrome/.test(window.navigator.userAgent);
}

console.log(isSafari()); // 如果是Safari浏览器，这里会输出true

6. 判断Chrome浏览器

Chrome浏览器的用户代理字符串中包含了 "Chrome" 且不包含 "OPR" 和 "Edge"。判断的方法如下：

function isChrome() {
    return /Chrome/.test(window.navigator.userAgent) && !/OPR/.test(window.navigator.userAgent) && !/Edge/.test(window.navigator.userAgent);
}

console.log(isChrome()); // 如果是Chrome浏览器，这里会输出true

7. 判断Edge浏览器

Edge浏览器的用户代理字符串中包含了 "Edge"。判断的方法如下：

function isEdge() {
    return /Edg/.test(window.navigator.userAgent);
}

console.log(isEdge()); // 如果是Edge浏览器，这里会输出true

360浏览器的判断

360浏览器就比较麻烦了，因为它既有兼容模式又有极速模式。而且它会模仿Chrome或者IE，所以单纯通过userAgent判断是不够的。我们需要结合特征检测的方法来判断。

1. 判断360极速浏览器

通过特征检测，可以判断出360极速浏览器。在极速模式下，360浏览器会带有特定的插件信息：

function is360() {
    let mimeTypes = window.navigator.mimeTypes;
    for (let mt in mimeTypes) {
        if (mimeTypes[mt].type === "application/360softmgrplugin") {
            return true;
        }
    }
    return false;
}

console.log(is360()); // 360极速浏览器返回true，其他浏览器返回false

2. 判断360安全浏览器

360安全浏览器在兼容模式下会伪装成IE，可以通过特定的ActiveX控件来判断：

function is360SE() {
    try {
        let ax = new ActiveXObject('Xunlei.XLWEBSAFE.1');
        return true;
    } catch (e) {
        return false;
    }
}

console.log(is360SE()); // 360安全浏览器返回true，其他浏览器返回false

最终的方法

虎哥给大家汇总一个最终的方法，通过判断不同的浏览器特征，直接返回当前浏览器的名称。代码如下：

function is360() {
    let mimeTypes = window.navigator.mimeTypes;
    for (let mt in mimeTypes) {
        if (mimeTypes[mt].type === "application/360softmgrplugin") {
            return true;
        }
    }
    return false;
}

function is360SE() {
    try {
        let ax = new ActiveXObject('Xunlei.XLWEBSAFE.1');
        return true;
    } catch (e) {
        return false;
    }
}

function detectBrowser() {
    var userAgent = window.navigator.userAgent;

    if (/MSIE|Trident/.test(userAgent)) {
        return "IE";
    } else if (/Edg/.test(userAgent)) {
        return "Edge";
    } else if (/Firefox/.test(userAgent)) {
        return "Firefox";
    } else if (/Opera|OPR/.test(userAgent)) {
        return "Opera";
    } else if (/Safari/.test(userAgent) && !/Chrome/.test(userAgent) && !/Edg/.test(userAgent)) {
        return "Safari";
    } else if (/Chrome/.test(userAgent) && !/OPR/.test(userAgent) && !/Edg/.test(userAgent)) {
        // Further check for 360 browsers
        if (is360SE()) {
            return "360安全浏览器";
        } else if (is360()) {
            return "360极速浏览器";
        } else {
            // Check for other 360 browsers based on specific mimeTypes
            let mimeTypes = window.navigator.mimeTypes;
            for (let i in mimeTypes) {
                if (mimeTypes[i]['type'] === 'application/vnd.chromium.remoting-viewer') {
                    return "360浏览器";
                }
            }
            return "Chrome";
        }
    } else {
        return "Unknown";
    }
}

console.log(detectBrowser()); // 输出当前使用的浏览器名称

只需要调用 detectBrowser() 方法，它会返回一个字符串，指示当前浏览器的名称。这样，咱们就能直接知道当前用户使用的浏览器了。

结语

最后，特别提醒一下，JS判断浏览器的方法虽然有用，但尽量不要过分依赖，毕竟浏览器厂商的更新迭代非常快，兼容性问题还是要多多注意。

大佬们如果还有更牛的方法，记得也分享出来！希望今天的分享对大家有帮助，如果你有啥独特的经验分享，欢迎在评论区留言！