TRY CODING FUN

重拾编程的乐趣

0%

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

发表于 更新于 分类于
本文字数： 1.7k 阅读时长 ≈ 2 分钟

前言

这几天我在弄公司的网站，弄的过程中，碰到了一个有趣的问题。
公司的软件能够运行在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">立即下载</a>
</div>

后记

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

相关文章