jQuery browser and OS detection plugin

Posted on July 16, 2009 by Stoimen
submit to reddit

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:

  1. jQuery debug plugin
  2. Writing a jQuery plugin – (part 2). Sample plugin.
  3. jQuery tooltip plugin!

You are a GREAT developer? Click here to answer the weekly quiz!

This entry was posted in javascript and tagged , , , , , . Bookmark the permalink.

32 Responses to jQuery browser and OS detection plugin

  1. Amir says:
    July 22, 2009 at 11:10 am

    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

  2. Stoimen says:
    July 26, 2009 at 3:11 pm

    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

  3. Gaurav says:
    September 8, 2009 at 11:05 am

    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.

  4. Stoimen says:
    September 8, 2009 at 11:10 am

    Yeah, thanks I’ll add this soon!

  5. Alexey says:
    September 29, 2009 at 6:10 pm

    Thank you guys this is exactly what i need.

  6. Mengu says:
    January 28, 2010 at 7:16 pm

    Hi,

    Thank you for this plugin. I have written a little introduction on my blog for your plugin.

  7. Stoimen says:
    January 28, 2010 at 9:43 pm

    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

  8. Mengu says:
    February 1, 2010 at 3:24 pm

    Hi Stoimen,

    Thank you for your comment. I’m glad at least someone liked it. :)

  9. memento says:
    March 2, 2010 at 11:38 pm

    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! ;]

  10. Stoimen says:
    March 3, 2010 at 9:18 am

    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.

  11. bahar says:
    March 17, 2010 at 5:25 pm

    cool dude

  12. vn says:
    March 31, 2010 at 6:19 pm

    very nice i appreciate!

  13. Kumar Amit Ranjan says:
    May 12, 2010 at 2:30 pm

    Hi,

    Would be nice if you add support for iPad and other mobile devices as well.

    Regards,
    Kumar Amit Ranjan

  14. Stoimen says:
    May 12, 2010 at 2:46 pm

    Yeah! Regarding of how new is the iPad I’ve to update a bit the source code!

    Thanks

  15. Ragnar says:
    September 7, 2010 at 3:02 pm

    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.

  16. Stoimen says:
    September 7, 2010 at 3:11 pm

    @Ragnar – well you can simply compare it like:

    if ($.client.os == 'Mac') { ... }
...
if ($.client.browser == 'Firefox') { ... }

    The possible strings to compare with OS are:

    Windows
Mac
iPhone/iPod
Linux

    For browsers:

    Chrome
OmniWeb
Safari
Opera
iCab
Konqueror
Firefox
Camino
Netscape
Explorer
Mozilla
  17. Sebastian says:
    September 8, 2010 at 4:05 pm

    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.

  18. Stoimen says:
    September 8, 2010 at 4:08 pm

    Well, I’ve to check this out! Thanks

  19. Mark says:
    November 12, 2010 at 8:25 pm

    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!

  20. Brad says:
    December 22, 2010 at 9:28 pm

    Thank you very much for providing a complete solution!

  21. Celso Bessa says:
    December 27, 2010 at 8:48 pm

    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!

  22. Art says:
    December 30, 2010 at 7:53 am

    THANK YOU VERY MUCH! Great work!

  24. rafael da costa says:
    May 19, 2011 at 5:42 pm

    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

  25. rafael da costa says:
    May 19, 2011 at 6:57 pm

    can the script be updated to detect Android os and browser versions?

  26. Tyler says:
    June 1, 2011 at 12:59 am

    How could I use this to load a different style sheet?

  27. stefano says:
    June 26, 2011 at 8:55 am

    @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.

    $(document).ready(function () {
   var body = $("html");
   body.addClass($.client.browser);
 
   // <em>body.addClass($.client.os);</em>
});

    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.

  28. Simon Mann says:
    July 27, 2011 at 11:18 am

    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:

    this.arch = this.searchString(this.dataArch) || "32bit";

    added a new data object under dataOS:

    dataArch : [
			{
				string: navigator.userAgent,
				subString: "WOW64",
				identity: "64bit"
			},
			{
				string: navigator.userAgent,
				subString: "Win64",
				identity: "64bit"
			},
			{
				string: navigator.userAgent,
				subString: "x64",
				identity: "64bit"
			},
			{
				string: navigator.userAgent,
				subString: "x86_64",
				identity: "64bit"
			},
		],

    and finally added it to the window.client call:

    window.$.client = { os : BrowserDetect.OS, browser : BrowserDetect.browser, arch : BrowserDetect.arch };

    Hope it might be useful to someone :)

    Si

  29. Aaron says:
    July 27, 2011 at 8:52 pm

    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

  30. tatump says:
    February 23, 2012 at 1:41 pm

    Thank very much ‘ for this script. Great work!

  31. Pranjal says:
    April 23, 2012 at 5:11 pm

    Can you tell me if I can detect OS version with this plugin, like Windows 7 and Windows XP ?

  32. Stoimen says:
    April 23, 2012 at 5:17 pm

    @Pranjal – no, you can’t.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">