Browser/OS detection with jQuery
As I wrote in my recent post I simply use the PPK BrowserDetect object to find out the browser/OS of the client. Actually I’m pretty sure there’s a similar jQuery plugin based again on that code from Quirksmode.org, but however I decided to write a simple plugin for jQuery wrapping it into a closure and exporting it in the “$” object.
Demo
You can see full working example here.
Installation
You must add a link to jquery.client.js after the jquery.js file in your code:
<html> <body> <div id="os"></div> <div id="browser"></div> <script src="./jquery-1.3.2.js"></script> <script src="./jquery.client.js"></script> <script> $('#os').html("<b>" + $.client.os + "</b>"); $('#browser').html("<b>" + $.client.browser + "</b>"); </script> </body> </html> |
Now there’s a $.client object containing two strings with OS and browser, they can be referenced with:
$.client.browser $.client.os |
You can append this code after you jquery.js installation. And if you’re on Firefox you simply can test with the console object:
Download
You can download the sample code from here.
This is very interesting. I think Jquery supported this functionality (jQuery.browser and jQuery.browser.version) but fro some reason it was deprecated in jQuery 1.3.
Since most of the time when i need this functionality is to determine the IE version (IE6 and IE7 are very different), does you plug-in also support version number?
Amir
Not the plugin does not support any version numbers. Actually $.browser.version is supporting such numbers. The $.client plugin is helping you mostly for OS detection, I guess.
Greetings,
stoimen
You can easily include the browser version functionality by adding this line in the “jquery.client.js” file (probably located at the last of the script file).
replace this line
window.$.client = { os : BrowserDetect.OS, browser : BrowserDetect.browser};
with this
window.$.client = { os : BrowserDetect.OS, browser : BrowserDetect.browser, browserversion : BrowserDetect.version };
and you will also get the browserversion.
Yeah, thanks I’ll add this soon!
Thank you guys this is exactly what i need.
Hi,
Thank you for this plugin. I have written a little introduction on my blog for your plugin.
Hi Mengu,
I’m glad I could help you! Thank you for your post, I think it’s great and I’ll definitely start following your blog.
greetings,
stoimen
Hi Stoimen,
Thank you for your comment. I’m glad at least someone liked it. 🙂
Hello, I would like to use your code in a wordpress plugin. Under what license is your code available? Just to be proper… Also when finished, I will include your links and licenses in the sources and the readme. Keep up the coding and sharing! ;]
Hi,
you’re free to use the code with no limitations, it’s completely open/free source. I’d love to see a reference in your plugin’s readme file it would be very nice.
cool dude
very nice i appreciate!
Hi,
Would be nice if you add support for iPad and other mobile devices as well.
Regards,
Kumar Amit Ranjan
Yeah! Regarding of how new is the iPad I’ve to update a bit the source code!
Thanks
Awesome plugin, thanks so much! I have this one little question, though… how do I make it conditional? Say, if the user is on Windows, they will see one thing, if on a Mac, they see another. I need this for a software download link.
@Ragnar – well you can simply compare it like:
The possible strings to compare with OS are:
Windows Mac iPhone/iPod LinuxFor browsers:
Hi,
nice idea – it seems to work under some circumstances and somehow not in my Opera under Windows 7 what is to bad.
About Browser-Versions I want to let you know that this will probably not work for Safari because Apple has only a kind of internal Versioning and not common version numbers – at least that’s what I read recently.
Well, I’ve to check this out! Thanks
Awesome plug-in! I was on the verge of writing an encapsulation for the $.browser property in jQuery but this solution is much cleaner. Thank you!
Thank you very much for providing a complete solution!
Great and simple plugin.
I am using in a website i am doing and i will put a note in the script header about you.
Thanks!
THANK YOU VERY MUCH! Great work!
Thanks dude, this is so nice and simple. It also compresses to 1.24KB
http://closure-compiler.appspot.com/code/jsc1a1f42dd415b9fe11d484ca9f9591418/default.js
I see you added code to detect browser version. do you have code to detect OS version as well. I need to detect os versions of mobile devices. some os versions of android do not support Typekit (Android 2.2 and higher only) and I need account for this by detecting Android 2.1
can the script be updated to detect Android os and browser versions?
How could I use this to load a different style sheet?
@Tyler,
I’ve seen a solution around I think you could use here as well. In short, you add to the html tag different CSS classes depending on $.client.browser and/or $.client.os and so on.
then you’ll need a CSS with those classes with the right properties for specific browser(s) you want. For instance:
.Safari {…} /* CSS for Safari */
.Explorer {…} /* CSS for MSIE */
And if also body.addClass($.client.os); you need more than just one class in CSS:
.Safari.Mac {…}
.Safari.Win {…}
Hope this helps.
Nice work.
I’m creating an application which detects whether the OS is 32 or 64bit architecture and then offers up an installer file. The main app is a pyside qt application which can handle all the OS checking for architecture but I needed to create a browser compatible fall back. This library helped lots but I decided to mod it slightly to do some basic architecture checks.
In the init: function part I added a call:
added a new data object under dataOS:
and finally added it to the window.client call:
Hope it might be useful to someone 🙂
Si
Great job! This is incredibly useful to me. I was having trouble with differences in UL spacing between Mac and Windows and this will allow me to use two different style sheets to compensate.
cheers,
aaron
Thank very much ‘ for this script. Great work!
Can you tell me if I can detect OS version with this plugin, like Windows 7 and Windows XP ?
@Pranjal – no, you can’t.
Added OS versioning for Windows, Mac and Linux. Tested on Win NT through Win 8, OS X 10.8, and Ubuntu. I’m sure it needs some additional testing but works for my needs as is.
(function() {
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || 'Unknown';
this.browserVersion = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "Unknown";
this.os = this.searchString(this.dataOs) || 'Unknown';
this.osVersion = this.searchString(this.dataOsVersion) || 'Unknown';
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataIdentityRegExGroups = data[i].identityRegExGroups;
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if(dataIdentityRegExGroups) {
var matches = dataIdentityRegExGroups.exec(dataString);
if(matches) { return matches[1]; }
}
else if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Internet Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOs : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
],
dataOsVersion : [
{
string: navigator.userAgent,
subString: "Windows NT 5.0",
identity: "Windows NT"
},
{
string: navigator.userAgent,
subString: "Windows NT 5.1",
identity: "Windows XP"
},
{
string: navigator.userAgent,
subString: "Windows NT 6.0",
identity: "Windows Vista"
},
{
string: navigator.userAgent,
subString: "Windows NT 6.1",
identity: "Windows 7"
},
{
string: navigator.userAgent,
subString: "Windows NT 6.2",
identity: "Windows 8"
},
{
string: navigator.userAgent,
subString: "Mac OS X",
identityRegExGroups: /Mac OS X ([^;]+)/gi
},
{
string: navigator.userAgent,
subString: "Linux",
identityRegExGroups: /X11; ([^\)]+)/gi
}
]
};
BrowserDetect.init();
window.$.client = {
browser: BrowserDetect.browser,
browserVersion: BrowserDetect.browserVersion,
os: BrowserDetect.os,
osVersion: BrowserDetect.osVersion
};
})();
@Mark – thanks!
Can you tell me how to detect an android operating system?
Hi there, I am new to javascript but basically all I want to do is for mac, iphone, ipad show a button that says register and for windows show a button that says download – each with separate links.
So basically I am thinking:
if ($.client.os == 'Mac') {
$(this).show("#register"); $(this).hide("#download");
}
if ($.client.os == 'iPhone') {
$(this).show("#register"); $(this).hide("#download");
}
if ($.client.os == 'Windows') {
$(this).show("#download"); $(this).hide("#register");
}
And within my html doc I have 2 buttons:
div id=”download” – Button for Windows
div id=”register” – Button for Mac
Am I far off here?
Thanks
hey, just tried on windows 7 in IE 11 and it shows as mozilla. 🙁
Anyway you can post the source and this project to your github space as repository? This way it can be used with bower, node .. etc.
Can you please be more explicit about “which” free or open source license this is being released/distributed under? e.g., MIT, BSD-2-clause, etc
Detected! Thank you for your script.