后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 JavaScript 从网页获取操作系统详细信息。👷♂️
前几天，我在 Vue 中制作了一个随机演示应用程序，我想获取用户的机器信息（不是为了窥探），而是显示基本信息，例如带有版本等的操作系统（OS）名称。
我不得不承认我在这方面很差，几乎立刻就放弃了这个想法。但现在我觉得，如果不用 Vue，我得用原生 JS 来做。
更进一步，我决定在检测操作系统后动态添加或删除 DOM 元素。虽然不是这样，但我们肯定会学习如何在 Web 和移动端检测操作系统。
检测桌面操作系统（Windows/Mac/Linux）
首先，让我们检测一下客户端的机器是否运行着一个亟需提升其应用商店的操作系统（Windows），或者一个几乎所有程序员和黑客最喜欢的操作系统（Linux），或者一个只能运行 XCode 的操作系统（Mac）。
navigator.appVersion这可以通过分析对象的值轻松实现window。这个简单的函数可以做很多事情。它不仅可以告诉你当前设备的操作系统（我们将在下面详细介绍），还可以用于获取当前运行的浏览器的版本信息。
让我们detectedOS在 JS 中声明一个变量，用于保存与操作系统类型相关的字符串信息。接下来，我们将进行三项if检查（switch也可以）。
// default value just in case if nothing is detected
var detectedOS = "Unknown OS";
在第一个检查中，让我们使用navigator.appVersion来获取三大操作系统平台的索引Win： （Windows）、Mac（MacOS）和Linux。
if (navigator.appVersion.indexOf("Mac") != -1)
detectedOS = "MacOS";
在这里，我们检查索引值是否不等于1，然后我们将变量值设置为“MacOS”。
同样的，我们可以对另外两个操作系统进行同样的检查：
var detectedOS = "Unknown OS";
if (navigator.appVersion.indexOf("Mac") != -1)
detectedOS = "MacOS";
if (navigator.appVersion.indexOf("Win") != -1)
detectedOS = "Windows";
if (navigator.appVersion.indexOf("Linux") != -1)
detectedOS = "Linux";
好的，很酷，但是如何向用户显示已检测到特定操作系统呢？有多种方法可以做到这一点。一个好方法是：
alert()当单击按钮时，添加显示“设备操作系统是：”的内容。
var detectOS = "Unknown OS";
if (navigator.appVersion.indexOf("Win") != -1)
detectOS = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1)
detectOS = "MacOS";
if (navigator.appVersion.indexOf("Linux") != -1)
detectOS = "Linux";
document.querySelector('button').addEventListener('click', detect);
function detect() {
alert(`Device OS is: ${detectOS}`)
}
在 Mac 上它看起来是这样的：
在 Windows 上：
在 Linux 上：
检测移动操作系统（Android/iOS）
使用当前代码，如果您尝试在移动设备上运行它（通过CodePen），您将看到以下警报：
虽然Android 确实基于Linux 的修改版本，但它并非完全是一个 Linux 操作系统。那么，我们如何确保这里检测到的是“Android”而不是“Linux”呢？
Stackoverflow 用户 Vladyslav Turak 在以下回答中对此进行了解释：
我学到了很多关于window.navigator对象及其属性的知识：platform、appVersion和userAgent。在我看来，几乎不可能 100% 确定地检测用户的操作系统，但就我而言，85%-90% 就足够了。
因此，在查阅了大量 Stack Overflow 答案和一些文章之后，我……
function getOS() {
var userAgent = window.navigator.userAgent,
platform = window.navigator.platform,
macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
iosPlatforms = ['iPhone', 'iPad', 'iPod'],
os = null;
if (macosPlatforms.indexOf(platform) !== -1) {
os = 'Mac OS';
} else if (iosPlatforms.indexOf(platform) !== -1) {
os = 'iOS';
} else if (windowsPlatforms.indexOf(platform) !== -1) {
os = 'Windows';
} else if (/Android/.test(userAgent)) {
os = 'Android';
} else if (!os && /Linux/.test(platform)) {
os = 'Linux';
}
return os;
}
alert(getOS());
如您所见，我们使用if与以前相同的语句检查，但对于 Android，我们/Android/.test使用 进行测试navigator.userAgent。
这是一个相当不错的解决方法，在我的 Android 手机上运行它后，结果如下：
我没有 iOS 设备来检查这个设备。你可以自己检查，然后在下面的评论区告诉我。
请注意，回答这个问题的人已经明确指出：
这段代码运行正常。我在所有操作系统上都测试过了：MacOS、iOS、Android、Windows 和 UNIX，但不能 100% 保证。
谢谢阅读，我非常感激！祝你拥有美好的一天。(✿◕‿◕✿)
调试可能很难😂
— 编码面试教练 (@CoachCoding) 2020 年 8 月 28 日
。#coding #developer #webdevelopment #iosdevelopment #javadevelopment #java #python #ruby #php #html #javascript #codingmeme #codingjoke #developerhumor #devhumor #devhumour #programmerhumor #programmingmeme #programmingjoke #devlife #webdesign pic.twitter.com/UtkN6iuRBG