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.
Add a comment
|
7 Answers
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>
1 Comment
Dennie
According to developer.mozilla.org this feature is deprecated and no longer recommended.
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.
3 Comments
NickAldwin
Why go through all that trouble when
navigator.platform exists?
Lucas Rossini
Because
navigator.platform is deprecated. Check developer.mozilla.org/en-US/docs/Web/API/NavigatorID.platform
Gordon
but
appVersion is deprecated as well?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
Comments
Try:
alert(navigator.appVersion);
That should give you a string that you can parse for the OS.
Comments
<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
Comments
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
}
}
Comments
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.
