Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find operating system in the client machine using JavaScript?
The operating system of the client machine can be detected using JavaScript navigator properties. This is useful for providing platform-specific functionality or displaying system information to users.
Using navigator.appVersion
The navigator.appVersion property returns a string containing browser and operating system information. This method allows you to parse the version string to identify the OS.
Syntax
navigator.appVersion
Example 1: Detecting Operating System
This example demonstrates how to detect the client's operating system using navigator.appVersion:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Click to get the operating system</h2>
<button ondblclick="operSys()">
Operating System
</button>
<p id="OS"></p>
<script>
function operSys() {
var OperSysName = "Unknown OS";
if (navigator.appVersion.indexOf("Win") != -1) OperSysName = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) OperSysName = "MacOS";
if (navigator.appVersion.indexOf("X11") != -1) OperSysName = "UNIX";
if (navigator.appVersion.indexOf("Linux") != -1) OperSysName = "Linux";
document.getElementById("OS").innerHTML = "The current operating system used in this machine is " + OperSysName;
}
</script>
</body>
</html>
Example 2: Displaying Full Version Information
This example shows the complete version string returned by navigator.appVersion:
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center;">
<h1>Click the button to get type Operating system</h1>
<button ondblclick="version()">
OS Version
</button>
<p id="OS"></p>
<script>
function version() {
var os = navigator.appVersion;
// Display the OS details
document.getElementById("OS").innerHTML = os;
}
</script>
</body>
</html>
Using navigator.userAgent
The navigator.userAgent property returns a more detailed string containing information about the browser, operating system, and other client details. This property provides comprehensive system information.
Syntax
navigator.userAgent
The userAgent string follows this general structure:
userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; Localization; rv: revision-version-number) product/productSub Application-Name Application-Name-version
Example 1: Getting User Agent String
This example demonstrates how to retrieve the complete user agent information:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>For checking the browser's User-agent header name, double click the "Check Operating System" button:</p>
<button ondblclick="checkOS()">
Check Operating System
</button>
<p id="header"></p>
<script>
function checkOS() {
var u = "User-agent header sent by the browser : " + navigator.userAgent;
document.getElementById("header").innerHTML = u;
}
</script>
</body>
</html>
Example 2: Auto-displaying System Information
This example automatically displays the operating system information when the page loads:
<!DOCTYPE html>
<html>
<body>
<h1>To get Operating System</h1>
<h2>Method-userAgent Property</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "The Operating system of the client machine is:<br>" + navigator.userAgent;
</script>
</body>
</html>
Comparison
| Method | Information Level | Best For |
|---|---|---|
navigator.appVersion |
Basic OS and browser version | Simple OS detection |
navigator.userAgent |
Detailed system information | Comprehensive platform analysis |
Conclusion
Both navigator.appVersion and navigator.userAgent can detect the client's operating system. Use appVersion for basic OS detection and userAgent for detailed system information and browser capabilities.
2K+ Views
