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.
Related posts:
- jQuery debug plugin
- Writing a jQuery plugin – (part 2). Sample plugin.
- jQuery tooltip plugin!
- clickoutside jQuery plugin
- jQuery OS detection
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?