Automa插件之js脚本小技巧：在浏览器环境下轻松判断操作系统

snowdreams1006

于 2024-08-17 11:30:00 发布

阅读量633

点赞数 13

分类专栏：工具资源系列文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38171180/article/details/141254100

版权

工具资源系列专栏收录该内容

40 篇文章 3 订阅

订阅专栏

前提

在咱们日常使用的手机或者电脑上，每个设备和系统都有自己的“身份证”，这个“身份证”就是navigator.userAgent。

简单来说，它就像是浏览器在告诉网站：“嘿，我是XX浏览器，运行在XX操作系统上”。

通过这个信息，网站就可以知道你是用什么设备、什么系统来访问的，然后给你提供最适合你的内容或功能。

Windows 电脑系统信息

Mac 电脑系统信息

下面,让我们看一下在不同的浏览器环境中,上述两种电脑操作系统分别有什么样的用户代理navigator.userAgent.

选择这两款浏览器是因为自动化浏览器插件Automa支持这两款浏览器,其他浏览器其他操作系统通通都不是我所关心的事情,哈哈哈!

实测

Chrome 谷歌浏览器

Windows

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Mac

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

经过文本差异比较工具,Chrome 谷歌浏览器可以看出来Windows和Mac客户端浏览器环境下,用户代理(Windows NT 10.0; Win64; x64)部分和(Macintosh; Intel Mac OS X 10_15_7)不同.

Firefox 火狐浏览器

Windows

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0

Mac

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0

同样地,文本差异比较工具能够看到Firefox 火狐浏览器,用户代理(Windows NT 10.0; Win64; x64; rv:109.0)部分和(Macintosh; Intel Mac OS X 10.15; rv:109.0)不同.

因此,在浏览器环境中通过js判断用户代理,可以推测操作系统是Windows还是Mac,这是可行的方案.

// Windows-Chrome
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
// Windows-Firefox
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0

// Mac-Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
// Mac-Firefox
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0

所以,经过分析可知,可以通过判断navigator.userAgent是否包含某些特征值来区分操作系统,可以实现如下代码:

function getOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    // Windows
    if (/windows/i.test(userAgent)) {
        return "Windows";
    }
    // MacOS
    if (/macintosh|mac os x/i.test(userAgent)) {
        return "Mac";
    }
    // Linux
    if (/linux/i.test(userAgent)) {
        return "Linux";
    }
    // 其他
    return "Unknown OS";
}

console.log(getOperatingSystem());

应用

根据操作系统不同,设置不同的下载路径,从而实现不同操作系统同步时不再需要手动调整配置,一键启动.

简单举例说明一下实际使用起来是多大效果的提升,原来更新配置时经常性需要重新修改download下载路径.

现在可以根据自动化插件运行的浏览器环境而判断出操作系统,就可以不用显示声明下载路径等差异化配置,不用担心同步变更问题.

{
    "download": "C:/Users/Administrator/Downloads/",
    "download-mac": "/Users/snowdreams1006/Downloads/",
    "download-win": "C:/Users/Administrator/Downloads/"
}

简单的升级改造实现了自动化机器人更进一步,得益于js脚本判断操作系统环境,解放了双手和重复的脑力输出.

例如Windows编写好插件先上传到云端:

然后,在Mac电脑登录相同账号,从云端同步到本地,这样就可以保持最新代码逻辑,不用额外更改路径问题了!

总结

本文主要是在浏览器环境下通过编写自动化插件遇到的实际问题中寻找更为简单的解决方案,虽然客户端浏览器不像服务器端那样很简单的获取操作系统信息.

但是,经过实际测试发现,原来用户代理navigator.userAgent就能够简单推断出操作系统信息,从而可以根据不同的电脑应用不同的逻辑.

function getOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    // Windows
    if (/windows/i.test(userAgent)) {
        return "Windows";
    }
    // MacOS
    if (/macintosh|mac os x/i.test(userAgent)) {
        return "Mac";
    }
    // Linux
    if (/linux/i.test(userAgent)) {
        return "Linux";
    }
    // 其他
    return "Unknown OS";
}