使用 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 部分源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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"> 立即下载 & lt;/a>
</div>

后记

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

坚持原创技术分享,您的支持将鼓励我继续创作!