jQuery/Javascript to detect OS without a plugin?

Question

I am looking for a way to detect the OS for a downloads page using jQuery or Javascript to recommend specific files for Mac vs Windows. I was hoping to do it without adding

Answer 1

You can use this function inside document ready function. Add the code inside function for your event.

function checkOperatingSystem()
{
    var  userAgent = navigator.userAgent || navigator.vendor || window.opera;

    //Check mobile device is Android
    if (/android/i.test(userAgent)) {
        //Add your Code here
    }

    //Check mobile device is IOS
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        //Add your Code here
    }

    //Check device os is Windows (For Laptop and PC)
    if (navigator.appVersion.indexOf("Win")!=-1)
    {
        //Add your Code here
    }

    //Check device os is MAC (For Laptop and PC)
    if (navigator.appVersion.indexOf("Mac")!=-1)
    {
        //Add your Code here
    }  
}

Answer 2

As far as I know the platform is the less spoofed property on the navigator Object. You can use this to get booleans.

var isMac = navigator.platform.toUpperCase().indexOf('MAC')!==-1;
var isWindows = navigator.platform.toUpperCase().indexOf('WIN')!==-1;
var isLinux = navigator.platform.toUpperCase().indexOf('LINUX')!==-1;

If you need to differentiate Macs between the old PowerPc and new Intel.

var isMacPpc=navigator.platform==="MacPPC";
var isMacIntel=navigator.platform==="MacIntel";

https://developer.mozilla.org/en/DOM/window.navigator.platform

Answer 3

Try:

alert(navigator.appVersion);

That should give you a string that you can parse for the OS.

Answer 4

Plain JavaScript might be all you need.

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

As Nick suggested you could use navigator.platform as well.

Answer 5

<script>

osName = 'Unknown';

function nav(x, y, z) {
    z = z || y;
    if (navigator[x] && navigator[x].indexOf(y) !== -1) {
        osName = z;
    }
}

/*   navigator     value     download  */
nav( "appVersion", "X11",    "UNIX"    );
nav( "appVersion", "Mac",    "MacOS"   );
nav( "appVersion", "Linux"             );
nav( "userAgent",  "Linux"             );
nav( "platform",   "Linux"             );
nav( "appVersion", "Win",    "Windows" );
nav( "userAgent",  "Windows"           );
nav( "platform",   "Win",    "Windows" );
nav( "oscpu",      "Windows"           );

document.getElementById("download"+osName).className = "knownOS";

</script>

Make sure the right download link is easy to find, but without hiding the other OS links. The people might still want those.

<style>

#downloadUNIX, #downloadMacOS, #downloadLinux, #downloadWindows {
    color:#6D94F2;
    line-height:35px;
    margin:24px 0 24px 0;
    padding:10px;
}
.knownOS {
    background-color:#F7ECAD !important;
    border:2px solid #E8913A;
    color:#133CC4 !important;
    font-weight:bold;
}

</style>

And some html

<ul>
    <li><a id="downloadUNIX"    href="unix Link Here"   >Download Napster-9000 for UNIX</a></li>
    <li><a id="downloadWindows" href="windows Link Here">Download Napster-9000 for Windows</a></li>
    <li><a id="downloadMacOS"   href="mac os link here" >Download Napster-9000 for OS X</a></li>
    <li><a id="downloadLinux"   href="linux Link Here"  >Download Napster-9000 for Linux</a></li>
</ul>

Now the user may disable or block javascripts if he wants. The links will still be there, as opposed to writing the links with Javascript, which requires javascript to work.

Here is a fiddle

http://jsfiddle.net/7fmJb/

Answer 6

I think this might help:

navigator.appVersion

Try consoling it in your JS file. For example:

console.log(navigator.appVersion);

You'll get most of the info regarding OS.