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.

37 thoughts on “jQuery browser and OS detection plugin

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

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

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

  7. Hi,

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

    Regards,
    Kumar Amit Ranjan

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

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

  11. 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!

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

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

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

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

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

    })();

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

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>