【问题标题】:How to detect my browser version and operating system using JavaScript?如何使用 JavaScript 检测我的浏览器版本和操作系统?
【发布时间】:2021-07-13 05:09:30
【问题描述】:

我尝试使用下面的代码,但它只在 Chrome 和 Mozilla 中显示结果,在 IE6 中不工作。

<div id="example"></div>

<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

输出:

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows)

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0

我只需要获取“Firefox/12.0”版本。

【问题讨论】:

标签: javascript browser operating-system version


【解决方案1】:

更新

我对@9​​87654321@ (demo here) 有过一些很好的体验,但还是建议谨慎行事:

原帖

我想把你推荐给WhichBrowser的作者:每个人都在撒谎

基本上,没有浏览器是诚实的。无论您使用 Chrome 还是 IE,它们都会告诉您它们是支持 Gecko 和 Safari 的“Mozilla Netscape”。在这个线程中飞来飞去的任何小提琴上自己尝试一下:

hims056's fiddle

Hariharan's fiddle

或任何其他...用 Chrome 试试(可能仍然成功),然后用最新版本的 IE 试试,你会哭的。当然,有启发式方法可以搞定,但掌握所有边缘情况会很乏味,而且很可能一年后就不再适用了。

以你的代码为例:

<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

Chrome 说:

浏览器代号:Mozilla

浏览器名称:网景

浏览器版本:5.0(Windows NT 6.1;WOW64)AppleWebKit/537.36 (KHTML,如 Gecko)Chrome/40.0.2214.115 Safari/537.36

启用 Cookie:真

平台:Win32

用户代理标头:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36(KHTML,如 Gecko)Chrome/40.0.2214.115 Safari/537.36

IE 说:

浏览器代号:Mozilla

浏览器名称:网景

浏览器版本:5.0(Windows NT 6.1;WOW64;Trident/7.0;SLCC2;.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729;媒体中心电脑 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) 喜欢壁虎

启用 Cookie:真

平台:Win32

用户代理标头:Mozilla/5.0(Windows NT 6.1;WOW64;Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; 媒体中心PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) 喜欢 壁虎

至少 Chrome 仍然有一个字符串,其中包含带有确切版本号的“Chrome”。但是,对于 IE,你必须从它支持的东西中推断出来才能真正弄清楚(还有谁会吹嘘他们支持 .NETMedia Center :P),然后在最后将它与 rv: 匹配到获取版本号。当然,一旦 IE 12(或任何他们想要的名称)问世,即使如此复杂的启发式方法也很可能会失败。

【讨论】:

【解决方案2】:

要获取基于 Mozilla 核心的新 Microsoft Edge,请添加:

else if ((verOffset=nAgt.indexOf("Edg"))!=-1) {
 browserName = "Microsoft Edge";
 fullVersion = nAgt.substring(verOffset+5);
}

之前

// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}

【讨论】:

    【解决方案3】:

    检测用户操作系统的代码

    let os = navigator.userAgent.slice(13).split(';')
    os = os[0]
    
    console.log(os)
    
    Windows NT 10.0
    

    【讨论】:

      【解决方案4】:

      我无法使用相同的代码在 Chrome、Firefox、IE11 和 Edge 上获得其他一些答案。 我想出了以下内容,它似乎适用于上面列出的那些浏览器。我还想看看用户使用的是什么操作系统。我没有针对具有用户覆盖的用户代理设置的浏览器对此进行测试,因此里程可能会有所不同。 IF 的顺序对于正常工作很重要。

      let os, osStore, bStore, appVersion, browser;
      // Chrome
      if(navigator.vendor === "Google Inc."){
          appVersion = navigator.appVersion.split(" ");
          os = [appVersion[1],appVersion[2],appVersion[3],appVersion[4],appVersion[5]].join(" ");
          os = os.split("(")[1].split(")")[0]
          browser = appVersion[appVersion.length-2].split("/").join(" ");
          console.log("Browser:",browser,"- OS:",os);
      }
      
      // Safari
      else if(navigator.vendor === "Apple Computer, Inc."){
          appVersion = navigator.appVersion.split(" ");
          os = [appVersion[1],appVersion[2],appVersion[3],appVersion[4],appVersion[5]].join(" ");
          os = os.split("(")[1].split(")")[0];
          browser = appVersion[appVersion.length-1].split("/").join(" ");
          console.log("Browser:",browser,"- OS:",os);
      }
      
      // Firefox is seems the only browser with oscpu
      else if(navigator.oscpu){
          bStore = navigator.userAgent.split("; ").join("-").split(" ");
          browser = bStore[bStore.length-1].replace("/"," ");
          osStore = [bStore[1],bStore[2],bStore[3]].join(" ");
          osStore = osStore.split("-");
          osStore.pop(osStore.lastIndexOf)
          osStore = osStore.join(" ").split("(");
          os = osStore[1];
          console.log("Browser:",browser,"- OS:",os);
      }
      
      // IE is seems the only browser with cpuClass
      // MSIE 11:10 Mode
      else if(navigator.appName === "Microsoft Internet Explorer"){
          bStore = navigator.appVersion.split("; ");
          browser = bStore[1]+" / "+bStore[4].replace("/"," ");
          os = [bStore[2],bStore[3]].join(" ");
          console.log("Browser:",browser,"- OS:",os);
      }
      
      // MSIE 11
      else if(navigator.cpuClass){
          bStore = navigator.appVersion.split("; ");
          osStore = [bStore[0],bStore[1]].join(" ");
          os = osStore.split("(")[1];
          browser = "MSIE 11 "+bStore[2].split("/").join(" ");
          console.log("Browser:",browser,"- OS:",os);
      }
      
      // Edge
      else if(navigator.appVersion){
          browser = navigator.appVersion.split(" ");
          browser = browser[browser.length -1].split("/").join(" ");
          os = navigator.appVersion.split(")")[0].split("(")[1];
          console.log("Browser:",browser,"- OS:",os);
      }
      
      // Other browser
      else {
          console.log(JSON.stringify(navigator));
      }
      

      【讨论】:

        【解决方案5】:

        检测浏览器的详细信息:

        var nVer = navigator.appVersion;
        var nAgt = navigator.userAgent;
        var browserName  = navigator.appName;
        var fullVersion  = ''+parseFloat(navigator.appVersion); 
        var majorVersion = parseInt(navigator.appVersion,10);
        var nameOffset,verOffset,ix;
        
        // In Opera, the true version is after "Opera" or after "Version"
        if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
         browserName = "Opera";
         fullVersion = nAgt.substring(verOffset+6);
         if ((verOffset=nAgt.indexOf("Version"))!=-1) 
           fullVersion = nAgt.substring(verOffset+8);
        }
        // In MSIE, the true version is after "MSIE" in userAgent
        else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
         browserName = "Microsoft Internet Explorer";
         fullVersion = nAgt.substring(verOffset+5);
        }
        // In Chrome, the true version is after "Chrome" 
        else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
         browserName = "Chrome";
         fullVersion = nAgt.substring(verOffset+7);
        }
        // In Safari, the true version is after "Safari" or after "Version" 
        else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
         browserName = "Safari";
         fullVersion = nAgt.substring(verOffset+7);
         if ((verOffset=nAgt.indexOf("Version"))!=-1) 
           fullVersion = nAgt.substring(verOffset+8);
        }
        // In Firefox, the true version is after "Firefox" 
        else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
         browserName = "Firefox";
         fullVersion = nAgt.substring(verOffset+8);
        }
        // In most other browsers, "name/version" is at the end of userAgent 
        else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
                  (verOffset=nAgt.lastIndexOf('/')) ) 
        {
         browserName = nAgt.substring(nameOffset,verOffset);
         fullVersion = nAgt.substring(verOffset+1);
         if (browserName.toLowerCase()==browserName.toUpperCase()) {
          browserName = navigator.appName;
         }
        }
        // trim the fullVersion string at semicolon/space if present
        if ((ix=fullVersion.indexOf(";"))!=-1)
           fullVersion=fullVersion.substring(0,ix);
        if ((ix=fullVersion.indexOf(" "))!=-1)
           fullVersion=fullVersion.substring(0,ix);
        
        majorVersion = parseInt(''+fullVersion,10);
        if (isNaN(majorVersion)) {
         fullVersion  = ''+parseFloat(navigator.appVersion); 
         majorVersion = parseInt(navigator.appVersion,10);
        }
        
        document.write(''
         +'Browser name  = '+browserName+'<br>'
         +'Full version  = '+fullVersion+'<br>'
         +'Major version = '+majorVersion+'<br>'
         +'navigator.appName = '+navigator.appName+'<br>'
         +'navigator.userAgent = '+navigator.userAgent+'<br>'
        )
        

        来源JavaScript: browser name
        See JSFiddle to detect Browser Details

        检测操作系统:

        // This script sets OSName variable as follows:
        // "Windows"    for all versions of Windows
        // "MacOS"      for all versions of Macintosh OS
        // "Linux"      for all versions of Linux
        // "UNIX"       for all other UNIX flavors 
        // "Unknown OS" indicates failure to detect the OS
        
        var OSName="Unknown OS";
        if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
        if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
        if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
        if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
        
        document.write('Your OS: '+OSName);
        

        来源JavaScript: OS detection
        See JSFiddle to detect OS Details

            var nVer = navigator.appVersion;
            var nAgt = navigator.userAgent;
            var browserName  = navigator.appName;
            var fullVersion  = ''+parseFloat(navigator.appVersion); 
            var majorVersion = parseInt(navigator.appVersion,10);
            var nameOffset,verOffset,ix;
            
            // In Opera, the true version is after "Opera" or after "Version"
            if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
             browserName = "Opera";
             fullVersion = nAgt.substring(verOffset+6);
             if ((verOffset=nAgt.indexOf("Version"))!=-1) 
               fullVersion = nAgt.substring(verOffset+8);
            }
            // In MSIE, the true version is after "MSIE" in userAgent
            else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
             browserName = "Microsoft Internet Explorer";
             fullVersion = nAgt.substring(verOffset+5);
            }
            // In Chrome, the true version is after "Chrome" 
            else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
             browserName = "Chrome";
             fullVersion = nAgt.substring(verOffset+7);
            }
            // In Safari, the true version is after "Safari" or after "Version" 
            else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
             browserName = "Safari";
             fullVersion = nAgt.substring(verOffset+7);
             if ((verOffset=nAgt.indexOf("Version"))!=-1) 
               fullVersion = nAgt.substring(verOffset+8);
            }
            // In Firefox, the true version is after "Firefox" 
            else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
             browserName = "Firefox";
             fullVersion = nAgt.substring(verOffset+8);
            }
            // In most other browsers, "name/version" is at the end of userAgent 
            else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
                      (verOffset=nAgt.lastIndexOf('/')) ) 
            {
             browserName = nAgt.substring(nameOffset,verOffset);
             fullVersion = nAgt.substring(verOffset+1);
             if (browserName.toLowerCase()==browserName.toUpperCase()) {
              browserName = navigator.appName;
             }
            }
            // trim the fullVersion string at semicolon/space if present
            if ((ix=fullVersion.indexOf(";"))!=-1)
               fullVersion=fullVersion.substring(0,ix);
            if ((ix=fullVersion.indexOf(" "))!=-1)
               fullVersion=fullVersion.substring(0,ix);
            
            majorVersion = parseInt(''+fullVersion,10);
            if (isNaN(majorVersion)) {
             fullVersion  = ''+parseFloat(navigator.appVersion); 
             majorVersion = parseInt(navigator.appVersion,10);
            }
            
            document.write(''
             +'Browser name  = '+browserName+'<br>'
             +'Full version  = '+fullVersion+'<br>'
             +'Major version = '+majorVersion+'<br>'
             +'navigator.appName = '+navigator.appName+'<br>'
             +'navigator.userAgent = '+navigator.userAgent+'<br>'
            )
        
            // This script sets OSName variable as follows:
            // "Windows"    for all versions of Windows
            // "MacOS"      for all versions of Macintosh OS
            // "Linux"      for all versions of Linux
            // "UNIX"       for all other UNIX flavors 
            // "Unknown OS" indicates failure to detect the OS
            
            var OSName="Unknown OS";
            if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
            if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
            if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
            if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
            
            document.write('Your OS: '+OSName);

        【讨论】:

        • 你知道我在哪里可以找到 appVersion 的所有可能值吗?那么 appVersion 使用的所有可能的操作系统值?
        • @JohnOdom 新系统(例如即将推出的 Steam 盒子)可能有自己的名称;现有系统可能会更改其名称或速记。除非您使用某种全球数据库从中获取信息,否则您永远不会是最新的;因为这完全是专有的。也许有一天,谷歌、W3 等将提供一个 API 来众包并公开所有不同的系统名称及其从用户那里收集到的关系。
        • verOffset=nAgt.indexOf("Opera"))!=-1。这不适用于 Opera 20 及更高版本。
        • 无法检测到 Edge。
        • 此 Javascript 已过期。将 Edge 和 IE 11 报告为“Netscape 5”。建议为此功能使用维护的库,例如 github.com/faisalman/ua-parser-js
        【解决方案6】:

        要使用 JavaScript 检测操作系统,最好使用 navigator.userAgent 而不是 navigator.appVersion

        {
          var OSName = "Unknown OS";
          if (navigator.userAgent.indexOf("Win") != -1) OSName = "Windows";
          if (navigator.userAgent.indexOf("Mac") != -1) OSName = "Macintosh";
          if (navigator.userAgent.indexOf("Linux") != -1) OSName = "Linux";
          if (navigator.userAgent.indexOf("Android") != -1) OSName = "Android";
          if (navigator.userAgent.indexOf("like Mac") != -1) OSName = "iOS";
          console.log('Your OS: ' + OSName);
        }

        【讨论】:

        • 赞成。此外,如果您能解释为什么它更好,那将非常有帮助:) 另外,似乎错过了“UNIX / X11”。
        • @SystemsRebooter 感谢您的评论,您可以将其添加为其他人。
        • 很好的答案,这很有帮助
        【解决方案7】:

        适用于 Firefox、Chrome、Opera、Internet Explorer 和 Safari

        var ua="Mozilla/1.22 (compatible; MSIE 10.0; Windows 3.1)";
        //ua = navigator.userAgent;
        var b;
        var browser;
        if(ua.indexOf("Opera")!=-1) {
        
            b=browser="Opera";
        }
        if(ua.indexOf("Firefox")!=-1 && ua.indexOf("Opera")==-1) {
            b=browser="Firefox";
            // Opera may also contains Firefox
        }
        if(ua.indexOf("Chrome")!=-1) {
            b=browser="Chrome";
        }
        if(ua.indexOf("Safari")!=-1 && ua.indexOf("Chrome")==-1) {
            b=browser="Safari";
            // Chrome always contains Safari
        }
        
        if(ua.indexOf("MSIE")!=-1 && (ua.indexOf("Opera")==-1 && ua.indexOf("Trident")==-1)) {
            b="MSIE";
            browser="Internet Explorer";
            //user agent with MSIE and Opera or MSIE and Trident may exist.
        }
        
        if(ua.indexOf("Trident")!=-1) {
            b="Trident";
            browser="Internet Explorer";
        }
        
        // now for version
        
        
        var version=ua.match(b+"[ /]+[0-9]+(.[0-9]+)*")[0];
        
        console.log("broswer",browser);
        console.log("version",version);
        

        【讨论】:

        • 将此添加到 chrome 中的控制台并获得“Safari/537.36”
        • 这将在 chrome 和其他浏览器中失败。由于 UserAgent 字符串不是完全可靠的资源。浏览器供应商通常会在其中包含误导性信息。
        【解决方案8】:

        为此目的有一个库:https://github.com/bestiejs/platform.js#readme

        那你就可以这样用了

        // example 1
        platform.os; // 'Windows Server 2008 R2 / 7 x64'
        
        // example 2 on an iPad
        platform.os; // 'iOS 5.0'
        
        // you can also access on the browser and some other properties
        platform.name; // 'Safari'
        platform.version; // '5.1'
        platform.product; // 'iPad'
        platform.manufacturer; // 'Apple'
        platform.layout; // 'WebKit'
        
        // or use the description to put all together
        platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'
        

        【讨论】:

        • 请注意,从此处答案中所有指向 github-libraries 的链接来看,这个库似乎是最新的(写于 2018 年 5 月,最后一次提交是 3 个月前')
        【解决方案9】:

        试试这个..

        // Browser with version  Detection
        navigator.sayswho= (function(){
            var N= navigator.appName, ua= navigator.userAgent, tem;
            var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
            if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
            M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
            return M;
        })();
        
        var browser_version          = navigator.sayswho;
        alert("Welcome to " + browser_version);
        

        查看工作小提琴 (here)

        【讨论】:

          【解决方案10】:

          PPK 的脚本是这类事情的权威,正如@Jalpesh 所说,这可能会为您指明正确的方向

          var wn = window.navigator,
                  platform = wn.platform.toString().toLowerCase(),
                  userAgent = wn.userAgent.toLowerCase(),
                  storedName;
          
          // ie
              if (userAgent.indexOf('msie',0) !== -1) {
                  browserName = 'ie';
                  os = 'win';
                  storedName = userAgent.match(/msie[ ]\d{1}/).toString();
                  version = storedName.replace(/msie[ ]/,'');
          
                  browserOsVersion = browserName + version;
              }
          

          取自https://github.com/leopic/jquery.detectBrowser.js/blob/sans-jquery/jquery.detectBrowser.sansjQuery.js

          【讨论】:

            猜你喜欢
            • 2014-06-01
            • 2012-09-20
            • 2010-10-13
            • 1970-01-01
            • 2011-07-08
            • 1970-01-01
            • 2015-05-31
            相关资源
            最近更新 更多