1. PingCode智库首页
  2. 百科

js怎么判断当前浏览器

Edit2 • • 百科

js怎么判断当前浏览器

JS判断当前浏览器的方法包括：navigator.userAgent、特定浏览器特性、第三方库检测。其中，使用navigator.userAgent是最常见的方法。具体来说，通过解析navigator.userAgent字符串，可以识别浏览器类型和版本。下面将详细介绍如何利用这些方法来判断当前浏览器。

一、使用 navigator.userAgent

1、解析 User Agent 字符串

navigator.userAgent是一个包含浏览器信息的字符串。通过解析这个字符串，可以识别出浏览器类型和版本。例如：

function getBrowserInfo() {


    const userAgent = navigator.userAgent;


    let browserName = "Unknown";


    let fullVersion = "Unknown";


    if (userAgent.indexOf("Firefox") > -1) {


        browserName = "Mozilla Firefox";


        fullVersion = userAgent.substring(userAgent.indexOf("Firefox") + 8);


    } else if (userAgent.indexOf("SamsungBrowser") > -1) {


        browserName = "Samsung Internet";


        fullVersion = userAgent.substring(userAgent.indexOf("SamsungBrowser") + 15);


    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {


        browserName = "Opera";


        fullVersion = userAgent.substring(userAgent.indexOf("Opera") + 6);


        if (userAgent.indexOf("OPR") > -1) {


            fullVersion = userAgent.substring(userAgent.indexOf("OPR") + 4);


        }


    } else if (userAgent.indexOf("Trident") > -1) {


        browserName = "Microsoft Internet Explorer";


        fullVersion = userAgent.substring(userAgent.indexOf("rv:") + 3);


    } else if (userAgent.indexOf("Edge") > -1) {


        browserName = "Microsoft Edge";


        fullVersion = userAgent.substring(userAgent.indexOf("Edge") + 5);


    } else if (userAgent.indexOf("Chrome") > -1) {


        browserName = "Google Chrome";


        fullVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);


    } else if (userAgent.indexOf("Safari") > -1) {


        browserName = "Apple Safari";


        fullVersion = userAgent.substring(userAgent.indexOf("Safari") + 7);


        if (userAgent.indexOf("Version") > -1) {


            fullVersion = userAgent.substring(userAgent.indexOf("Version") + 8);


        }


    }


    return {


        browserName: browserName,


        fullVersion: fullVersion


    };


}


const browserInfo = getBrowserInfo();


console.log(browserInfo.browserName, browserInfo.fullVersion);

2、常见的 User Agent 示例

下面是一些常见浏览器的 User Agent 示例：

  • Chrome: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
  • Firefox: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
  • Safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15
  • Edge: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.59
  • Opera: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 OPR/77.0.4054.60

二、利用特定浏览器特性

一些浏览器有独特的特性或行为，可以通过检测这些特性来识别浏览器。例如：

1、检测 Chrome 专有特性

const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);


console.log("Is Chrome: ", isChrome);

2、检测 Firefox 专有特性

const isFirefox = typeof InstallTrigger !== 'undefined';


console.log("Is Firefox: ", isFirefox);

3、检测 Safari 专有特性

const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {


    return p.toString() === "[object SafariRemoteNotification]";


})(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));


console.log("Is Safari: ", isSafari);

4、检测 Edge 专有特性

const isEdge = !isIE && !!window.StyleMedia;


console.log("Is Edge: ", isEdge);

5、检测 Opera 专有特性

const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;


console.log("Is Opera: ", isOpera);

三、使用第三方库

第三方库如 Bowser 和 Platform.js 可以简化浏览器检测的过程。这些库提供了方便的方法来识别浏览器类型和版本。

1、使用 Bowser

首先，通过 npm 或 CDN 引入 Bowser 库：

<script src="https://cdn.jsdelivr.net/npm/bowser@2/dist/bowser.min.js"></script>

然后，使用 Bowser 来检测浏览器：

const browser = bowser.getParser(window.navigator.userAgent);


const browserInfo = browser.getBrowser();


console.log(browserInfo.name, browserInfo.version);

2、使用 Platform.js

同样地，通过 npm 或 CDN 引入 Platform.js 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.6/platform.min.js"></script>

然后，使用 Platform.js 来检测浏览器：

const browserInfo = platform.parse(window.navigator.userAgent);


console.log(browserInfo.name, browserInfo.version);

四、综合应用

在实际开发中，可能需要结合多种方法来提高浏览器检测的准确性。例如，可以先使用 navigator.userAgent 进行初步检测，然后结合特定浏览器特性来进一步确认。

1、综合示例

function detectBrowser() {


    const userAgent = navigator.userAgent;


    let browserName = "Unknown";


    let fullVersion = "Unknown";


    let isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);


    let isFirefox = typeof InstallTrigger !== 'undefined';


    let isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {


        return p.toString() === "[object SafariRemoteNotification]";


    })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));


    let isEdge = !isIE && !!window.StyleMedia;


    let isOpera = (!!window.opr && !!opr.addons) || !!window.opera || userAgent.indexOf(' OPR/') >= 0;


    if (isChrome) {


        browserName = "Google Chrome";


        fullVersion = userAgent.substring(userAgent.indexOf("Chrome") + 7);


    } else if (isFirefox) {


        browserName = "Mozilla Firefox";


        fullVersion = userAgent.substring(userAgent.indexOf("Firefox") + 8);


    } else if (isSafari) {


        browserName = "Apple Safari";


        fullVersion = userAgent.substring(userAgent.indexOf("Safari") + 7);


        if (userAgent.indexOf("Version") > -1) {


            fullVersion = userAgent.substring(userAgent.indexOf("Version") + 8);


        }


    } else if (isEdge) {


        browserName = "Microsoft Edge";


        fullVersion = userAgent.substring(userAgent.indexOf("Edge") + 5);


    } else if (isOpera) {


        browserName = "Opera";


        fullVersion = userAgent.substring(userAgent.indexOf("Opera") + 6);


        if (userAgent.indexOf("OPR") > -1) {


            fullVersion = userAgent.substring(userAgent.indexOf("OPR") + 4);


        }


    }


    return {


        browserName: browserName,


        fullVersion: fullVersion


    };


}


const browserInfo = detectBrowser();


console.log(browserInfo.browserName, browserInfo.fullVersion);

通过以上方法，您可以在不同场景下精确判断当前浏览器类型和版本，从而为用户提供更好的体验。

相关问答FAQs：

1. 如何在JavaScript中判断当前浏览器类型？

JavaScript提供了几种方法来判断当前浏览器类型。可以使用navigator.userAgent属性来获取浏览器的User-Agent字符串，然后根据不同的User-Agent字符串来判断浏览器类型。

2. 如何使用User-Agent来判断浏览器类型？

通过分析User-Agent字符串中的关键词可以判断浏览器类型。例如，当User-Agent字符串中包含"Chrome"时，可以判断当前浏览器为Chrome浏览器；当User-Agent字符串中包含"Firefox"时，可以判断当前浏览器为Firefox浏览器。

3. 有没有更简便的方法来判断当前浏览器类型？

除了使用User-Agent字符串来判断浏览器类型外，还可以使用现成的JavaScript库或框架来实现浏览器类型的判断。例如，可以使用platform.js库来获取当前浏览器类型的详细信息，包括浏览器名称、版本号等。这样可以更方便地判断当前浏览器类型。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3777390

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部