使用JavaScript通过UserAgent判断当前浏览器

在JavaScript中，我们可以通过navigator.userAgent属性来获取浏览器的UserAgent字符串，然后通过分析这个字符串来判断用户当前使用的浏览器类型和版本。

基本实现方法

function detectBrowser() {
    const userAgent = navigator.userAgent;
    let browserName;
    let browserVersion;

    // 检测浏览器类型
    if (userAgent.includes("Firefox")) {
        browserName = "Mozilla Firefox";
        // 提取Firefox版本号
        browserVersion = userAgent.match(/Firefox\/(\d+)/)[1];
    } else if (userAgent.includes("SamsungBrowser")) {
        browserName = "Samsung Browser";
        browserVersion = userAgent.match(/SamsungBrowser\/(\d+)/)[1];
    } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
        browserName = "Opera";
        if (userAgent.includes("OPR")) {
            browserVersion = userAgent.match(/OPR\/(\d+)/)[1];
        } else {
            browserVersion = userAgent.match(/Opera\/(\d+)/)[1];
        }
    } else if (userAgent.includes("Trident")) {
        browserName = "Internet Explorer";
        browserVersion = userAgent.match(/rv:(\d+)/)[1];
    } else if (userAgent.includes("Edge")) {
        browserName = "Microsoft Edge";
        browserVersion = userAgent.match(/Edge\/(\d+)/)[1];
    } else if (userAgent.includes("Chrome")) {
        browserName = "Google Chrome";
        browserVersion = userAgent.match(/Chrome\/(\d+)/)[1];
    } else if (userAgent.includes("Safari")) {
        browserName = "Apple Safari";
        browserVersion = userAgent.match(/Version\/(\d+)/)[1];
    } else {
        browserName = "Unknown";
        browserVersion = "Unknown";
    }

    return {
        name: browserName,
        version: browserVersion,
        userAgent: userAgent
    };
}

// 使用示例
const browserInfo = detectBrowser();
console.log(`浏览器名称: ${browserInfo.name}`);
console.log(`浏览器版本: ${browserInfo.version}`);
console.log(`UserAgent字符串: ${browserInfo.userAgent}`);

更现代的检测方法

随着浏览器的发展，UserAgent字符串可能会变得不可靠（例如Chrome的UserAgent中可能包含"Safari"）。更现代的方法是使用特征检测结合UserAgent分析：

function getBrowserInfo() {
    const userAgent = navigator.userAgent;
    let name = 'Unknown';
    let version = 'Unknown';
    
    // 检测Edge (基于Chromium的新版)
    if (userAgent.includes("Edg/")) {
        name = 'Microsoft Edge (Chromium)';
        version = userAgent.match(/Edg\/(\d+\.\d+)/)[1];
    }
    // 检测Chrome
    else if (userAgent.includes("Chrome") && !userAgent.includes("Edg")) {
        name = 'Google Chrome';
        version = userAgent.match(/Chrome\/(\d+\.\d+)/)[1];
    }
    // 检测Firefox
    else if (userAgent.includes("Firefox")) {
        name = 'Mozilla Firefox';
        version = userAgent.match(/Firefox\/(\d+\.\d+)/)[1];
    }
    // 检测Safari
    else if (userAgent.includes("Safari") && !userAgent.includes("Chrome")) {
        name = 'Apple Safari';
        version = userAgent.match(/Version\/(\d+\.\d+)/)[1] || 'Unknown';
    }
    // 检测IE
    else if (userAgent.includes("Trident")) {
        name = 'Internet Explorer';
        const rv = userAgent.match(/rv:(\d+\.\d+)/);
        version = rv ? rv[1] : 'Unknown';
    }
    
    return { name, version, userAgent };
}

注意事项

1. UserAgent可以被伪造：用户或浏览器扩展可以修改UserAgent字符串，因此不能完全依赖它进行关键功能判断。

2. 优先使用特征检测：对于功能检测，最好使用现代JavaScript的特征检测方法，而不是依赖UserAgent。

3. 浏览器更新频繁：UserAgent字符串会随着浏览器更新而变化，需要定期更新检测逻辑。

4. 移动端浏览器：移动设备的浏览器检测更为复杂，通常需要结合UserAgent和屏幕尺寸等信息。

更简单的现代替代方案

如果你只需要知道浏览器是否支持某些特性，而不是具体的浏览器类型，推荐使用特征检测：

// 检测是否支持WebP图片格式
function supportsWebp() {
    const elem = document.createElement('canvas');
    if (!!(elem.getContext && elem.getContext('2d'))) {
        return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
    }
    return false;
}

// 检测是否支持某些API
if ('serviceWorker' in navigator) {
    // 浏览器支持Service Worker
}

UserAgent检测在大多数现代Web开发中已经不再是首选方法，但在某些特定场景下（如统计、兼容性处理）仍然有用。