Home >Web Front-end >JS Tutorial >How Can I Detect and Display a User's Operating System Details Using JavaScript?

How Can I Detect and Display a User's Operating System Details Using JavaScript?

DDD
DDDOriginal
2024-12-01 16:53:14904browse

How Can I Detect and Display a User's Operating System Details Using JavaScript?

JavaScript: Detecting Operating System Details

In web development, it can be useful to retrieve information about the user's operating system, such as its name and version. JavaScript provides methods to access this data and display it to the user.

Locating Operating System Details

The following script can be used to detect the operating system name and version:

(function () {
    var system = navigator.platform;
    var osName = "Unknown";
    osName = (navigator.userAgentData && navigator.userAgentData.platform) ? navigator.userAgentData.platform : osName;
    var osVersion = "Unknown";
    
    if (system.includes("Win")) {
        osName = "Windows";
        osVersion = /Windows (.*)/.exec(navigator.userAgent)[1];
    } else if (system.includes("Mac")) {
        osName = "macOS";
        osVersion = /(?<=Mac OS X )\d+(\.\d+)+/.exec(navigator.userAgent)[0];
    } else if (system.includes("Linux")) {
        osName = "Linux";
        osVersion = unknown;
    } else if (system.includes("Android")) {
        osName = "Android";
        osVersion = navigator.userAgent.slice(navigator.userAgent.indexOf("Android ") + 8, navigator.userAgent.indexOf(";"));
    } else if (system.includes("iPhone")) {
        osName = "iOS";
        osVersion = navigator.userAgent.slice(navigator.userAgent.indexOf("OS ") + 3, navigator.userAgent.indexOf(" like Mac"));
    } else if (system.includes("iPad")) {
        osName = "iPadOS";
        osVersion = navigator.userAgent.slice(navigator.userAgent.indexOf("OS ") + 3, navigator.userAgent.indexOf(" like Mac"));
    }
    
    return {
        osName: osName,
        osVersion: osVersion
    };
})();

Accessing the Details

Once the script has run, the operating system details can be accessed using the following properties:

  • osName: The name of the operating system (e.g., "Windows", "macOS", "Linux")
  • osVersion: The version of the operating system (e.g., "10.0", "12.1", "5.2")

Note: The above script provides a generalized approach to detecting the operating system details. Actual implementation and accuracy may vary depending on the specific environment and browser configuration.

The above is the detailed content of How Can I Detect and Display a User's Operating System Details Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn