CODEWITHSUNDEEP
javascriptjqueryoperating-system
Tim Withers
Tim Withers

Reputation: 12059

jQuery/Javascript to detect OS without a plugin?

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 another plugin to my page.

Upvotes: 38

Views: 59637

Answers (7)

rahim.nagori
rahim.nagori

Reputation: 666

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.

Upvotes: 0

Rohan Varma
Rohan Varma

Reputation: 101

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

Upvotes: 0

Robert
Robert

Reputation: 8767

Try:

var os = navigator.platform;

Then handle the os variable accordingly for your result.

You can also loop through each object of the navigator object to help get you more familiarized with the objects:

<script type="text/javascript">
for(var i in navigator){
    console.log(i+"="+navigator[i]+'<br>');
}
</script>

Upvotes: 55

gaby de wilde
gaby de wilde

Reputation: 433

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

Upvotes: 5

Vitim.us
Vitim.us

Reputation: 22128

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

Upvotes: 14

Shawn
Shawn

Reputation: 7365

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.

Upvotes: 32

davecoulter
davecoulter

Reputation: 1826

Try:

alert(navigator.appVersion);

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

Upvotes: 6

Related Questions