jQuery browser and OS detection plugin

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!
  4. clickoutside jQuery plugin
  5. jQuery OS detection

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

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

35 Responses to jQuery browser and OS detection plugin

  1. Amir says:

    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:

    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:

    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:

    Yeah, thanks I’ll add this soon!

  5. Alexey says:

    Thank you guys this is exactly what i need.

  6. Mengu says:

    Hi,

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

  7. Stoimen says:

    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:

    Hi Stoimen,

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

  9. memento says:

    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:

    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:

    cool dude

  12. vn says:

    very nice i appreciate!

  13. Kumar Amit Ranjan says:

    Hi,

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

    Regards,
    Kumar Amit Ranjan

  14. Stoimen says:

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

    Thanks

  15. Ragnar says:

    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:

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

    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:

    Well, I’ve to check this out! Thanks

  19. Mark says:

    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:

    Thank you very much for providing a complete solution!

  21. Celso Bessa says:

    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:

    THANK YOU VERY MUCH! Great work!

  23. rafael da costa says:

    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

  24. rafael da costa says:

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

  25. Tyler says:

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

  26. stefano says:

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

  27. Simon Mann says:

    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

  28. Aaron says:

    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

  29. tatump says:

    Thank very much ‘ for this script. Great work!

  30. Pranjal says:

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

  31. Stoimen says:

    @Pranjal – no, you can’t.

  32. Mark says:

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

    })();

  33. Stoimen says:

    @Mark – thanks!

  34. Sergio says:

    Can you tell me how to detect an android operating system?

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>