Detect the Operating System of User using JavaScript

Last Updated : 19 Jul, 2019

The task is detect the operating system of User with the help of JavaScript. we’re going to discuss few techniques.

Approach:

Access the navigator.appVersion or navigator.userAgent property.
Get the index of the OS using indexOf() method.
If index is other than -1, then it is the OS, that we are looking for.

Example 1: In this example, navigator.appVersion property is used to get the OS.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Detecting the Operating System of User. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks 
        </h1> 
    <p id="GFG_UP"
       style="font-size: 19px;  
              font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" 
       style="color: green;  
              font-size: 24px;  
              font-weight: bold;"> 
    </p> 
    <script> 
        HTMLDocument.prototype.e = document.getElementById; 
        var el_up = document.e("GFG_UP"); 
        var el_down = document.e("GFG_DOWN"); 
        el_up.innerHTML = "Click on the button to get the OS of User's System."; 
        var Name = "Not known"; 
        if (navigator.appVersion.indexOf("Win") != -1) Name =  
          "Windows OS"; 
        if (navigator.appVersion.indexOf("Mac") != -1) Name =  
          "MacOS"; 
        if (navigator.appVersion.indexOf("X11") != -1) Name =  
          "UNIX OS"; 
        if (navigator.appVersion.indexOf("Linux") != -1) Name =  
          "Linux OS"; 
  
        function GFG_Fun() { 
            el_down.innerHTML = Name; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example 2: In this example, navigator.userAgent property is used to get the OS.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Detecting the Operating System of User. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks 
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 19px; 
              font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" 
       style="color: green; 
              font-size: 24px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        el_up.innerHTML = "Click on the button to get the OS of User's System."; 
        var Name = "Unknown OS"; 
        if (navigator.userAgent.indexOf("Win") != -1) Name =  
          "Windows OS"; 
        if (navigator.userAgent.indexOf("Mac") != -1) Name =  
          "Macintosh"; 
        if (navigator.userAgent.indexOf("Linux") != -1) Name =  
          "Linux OS"; 
        if (navigator.userAgent.indexOf("Android") != -1) Name =  
          "Android OS"; 
        if (navigator.userAgent.indexOf("like Mac") != -1) Name =  
          "iOS"; 
  
        function GFG_Fun() { 
            el_down.innerHTML = Name; 
        } 
    </script> 
</body> 
  
</html> 