前言
这几天我在弄公司的网站,弄的过程中,碰到了一个有趣的问题。
公司的软件能够运行在 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);
|
就这样,我们就能获取我们想要的信息(浏览器及操作系统类型)了。
完整代码
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 41
| 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>
|
后记
用起来很方便,但是需要一些基础。