How to find operating system in the client machine using JavaScript?

The type of operating system used in the client machine can be detected using some of the functions in JavaScript. The different functions are discussed below.

Using navigator.appVersion

This property will return the information about the browser and the operating system being used in the form of a string.

Syntax

The syntax for the navigator.appVersion is given below.

navigator.appVersion

Example 1

This example demonstrates the usage of navigator.appVersion to detect client OS −

<!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>

As you can observe when the above code is executed, a button will be displayed on the browser.

On clicking the button the underlying operating system will be printed.

Example 2

Following is another example of this method −

<!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>

When you execute the above program it will display a button named OS Version.

On clicking this button the OS version will be displayed.

Using navigator.userAgent

This is a property which is used to return the operating system of the client machine and returns it in the form of a string.

Syntax

The following is the syntax for the above method.

navigator.userAgent

The structure of the string when this is used to detect the operating system is as −

userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version

Example 1

This example demonstrates how to get the operating system of the client machine using navigator.userAgent.

<!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>

On clicking the button the versions of the browser, operating system are displayed along with other information.

Example 2

Following is another example of navigator.userAgent.

<!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>

Updated on: 26-Aug-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements