使用JS识别判断浏览器及操作系统类型

前言

这几天我在弄公司的网站，弄的过程中，碰到了一个有趣的问题。
公司的软件能够运行在 Windows、Mac OS X 以及 Linux 上，所以需要下载对应系统的软件包。比如 Windows10 64 位的电脑需要下载 win64.exe，苹果电脑需要下载 dmg 后缀的文件。
但是按钮只有一个，怎么让用户点一下就能自动下载对应的软件呢？
这需要网站能够识别和判断用户的操作系统，然后给出对应系统的下载链接。

使用 JS 识别判断浏览器及操作系统类型

其中主要要用到的是navigator.userAgent

我们可以在 W3C 或者 MDN 看一下它的资料：MDN - NavigatorID.userAgent

返回当前浏览器的用户代理（user agent）字符串。
W3C - NavigatorID.userAgent

比如当我们在浏览器中用下面的 JS 语句的时候，会返回一些信息，如下：

1 2	alert(window.navigator.userAgent); // 弹出 "Mozilla/5.0 (Windows; U; Win98; zh-CN; rv:0.9.2) Gecko/20010725 Netscape6/6.1"

就这样，我们就能获取我们想要的信息（浏览器及操作系统类型）了。

完整代码

JavaScript 部分源码

var system = {
  win32: false,
  win64: false,
  mac: false,
  xll: false,
};

//检测平台
var p = navigator.userAgent;

// 进行简单的判断
system.win32 = p.indexOf("Win32") > -1;
system.win64 = p.indexOf("Win64") > -1 || p.indexOf("WOW64") > -1;
system.mac = p.indexOf("Mac") > -1;
system.x11 = p == "X11" || p.indexOf("Linux") > -1;

// 绑定按钮
var downloadlink = document.getElementById("download_link");

// 先进行判断，如果判断不出，就直接给出下载页
if (system.win32 || system.mac || system.xll || system.win64) {
  if (system.win32) {
    downloadlink.href =
      "https://blog.itnote.me/Web/Web-technical-document-query/";
  }

  if (system.win64) {
    downloadlink.href = "https://blog.itnote.me/Web/search-thank-you/";
  }

  if (system.mac) {
    downloadlink.href =
      "https://blog.itnote.me/Node-js/centos7-install-nodejs/";
  }

  if (system.xll) {
    downloadlink.href = "https://blog.itnote.me/Nginx/nginx-proxy-install/";
  }
} else {
  downloadlink.href = "./download.html";
}

Html 部分源码

1
2
3

<div id="" class="">
  <a href="https://blog.itnote.me" id="download_link" class="download_link">立即下载</a>
</div>

后记

用起来很方便，但是需要一些基础。