jQBrowser is a plugin for the jQuery JavaScript library that replaces the $.browser object with a more robust and extensive detection based upon work by Peter-Paul Koch. This document describes jQBrowser version 0.2.
Dave Cardwell (jQuery plugins)
$.browser object now relies on accessor methods instead of allowing direct access to Private variables. As such you will now need to use $.browser.msie() instead of $.browser.msie.
navigator.vendor instead of navigator.userAgent for detection.
The uncompressed source code is heavily documented. After reading this synopsis, that would be a good place to look.
You can either use $.browser.browser() to get the detected browser, or check for a specific browser yourself.
var browser = $.browser.browser(); // the detected browser (defaults to 'Unknown')
// The following functions return a boolean value indicating whether or not the given browser was detected:
var aol = $.browser.aol(); // AOL Explorer
var camino = $.browser.camino(); // Camino
var firefox = $.browser.firefox(); // Firefox
var flock = $.browser.flock(); // Flock
var icab = $.browser.icab(); // iCab
var konqueror = $.browser.konqueror(); // Konqueror
var mozilla = $.browser.mozilla(); // Mozilla
var msie = $.browser.msie(); // Internet Explorer Win / Mac
var netscape = $.browser.netscape(); // Netscape
var opera = $.browser.opera(); // Opera
var safari = $.browser.safari(); // Safari
$.browser.version.string() returns the full browser version string detected, while $.browser.version.number() attempts to wrangle that string into a usable number.
alert( "You're using version " + $.browser.version.string() ); // defaults to 'Unknown'
if( $.browser.version.number() > 1.5 ) { // defaults to undefined
// Do something...
}
You can either use $.browser.OS() to get the detected operating system, or check for a specific OS yourself.
var os = $.browser.OS(); // the detected OS (defaults to 'Unknown')
// The following functions return a boolean value indicating whether or not the given operating system was detected:
var linux = $.browser.linux(); // Linux
var mac = $.browser.mac(); // Mac OS
var win = $.browser.win(); // Microsoft WindowsWarning: Browser detection is always an imprecise science. 99% of the time object detection is what you’re after.
Unlike the native jQuery $.browser object, the browser detection is accessed by functions so you need to use parantheses (ie. $.browser.msie() instead of $.browser.msie).
While the list of browsers and operating systems is not exhaustive, I used Wikipedia to determine the user agent strings of the most common. It is trivial to add new detection, so either modify the source for your needs or contact me if you think I’ve missed out a major browser that should be in the list.
To quote Peter-Paul Koch:
Unfortunately Safari’s string never contains its official version; only its internal Apple version number (ie. not 1.3.2 but 312.6). Therefore the version number detect doesn’t work in Safari. Since this is clearly Apple’s fault (it doesn’t follow established conventions), I don’t care.
jQBrowser is dual-licensed under the MIT and GNU GPL licenses, so if you can use jQuery you can use this plugin.
If you find a use for jQBrowser I’d love to hear about it. Also, a link to this site wouldn’t go amiss!
I recommend you download the version that I’ve compressed with Dean Edwards’ packer which weighs in at 2.6K. Alternatively I make the heavily documented, uncompressed version available at 12.5K.
jQBrowser v0.2 has no known bugs.
$('#test-browser').html( 'You are using the browser: ' + $.browser.browser() );The following paragraph should give the browser that you are currently using, or 'Unknown' if it is not in the list of detected user agent:
Browser detection was not performed.
// The browsers to test.
var browsers = [ 'aol', 'camino', 'firefox', 'flock',
'icab', 'konqueror', 'mozilla', 'msie',
'netscape', 'opera', 'safari' ];
// The corresponding list of browsers in the document.
var $list = $('#test-browser-specific');
for( var i = 0; i < browsers.length; i++ )
$list.find( 'li.' + browsers[i] + ' pre' ) // find the current browser in the DOM
.append( '<code>' + $.browser[ browsers[i] ]() + '<\/code>' ) // append true/false as appropriate
.end(); // return $list to its previous stateThe following list should correctly reflect the browser you are currently using:
$.browser.aol(): $.browser.camino(): $.browser.firefox(): $.browser.flock(): $.browser.icab(): $.browser.konqueror(): $.browser.mozilla(): $.browser.msie(): $.browser.netscape(): $.browser.opera(): $.browser.safari(): $('#test-version').html( 'You are using version: ' + $.browser.version.string() + ' (' + $.browser.version.number() + ')' );
The following paragraph should give the version of the browser that you are currently using, followed by a numerical value of that string in brackets. They will default to 'Unknown' and undefined if not detected.
Version detection was not performed.
$('#test-os').html( 'You are using the operating system: ' + $.browser.OS() );The following paragraph should give the OS that you are currently using, or 'Unknown' if it is not in the list of detected operating systems:
Operating system detection not performed.
// The operating systems to test.
var os = [ 'linux', 'mac', 'win' ];
// The corresponding list of operating systems in the document.
var $list = $('#test-os-specific');
for( var i = 0; i < os.length; i++ )
$list.find( 'li.' + os[i] + ' pre' ) // find the current OS in the DOM
.append( '<code>' + $.browser[ os[i] ]() + '<\/code>' ) // append true/false as appropriate
.end(); // return $list to its previous stateThe following list should correctly reflect the operating system you are currently using:
$.browser.linux(): $.browser.mac(): $.browser.win():