JQuery’s Browser Detection Capabilities

If you have ever worked on apps that require different scripts, images, or links for different browsers you will find this useful.

Check Which Browser The User Is Using

JQuery allows you to use the $.broswer property which in an array of elements one of which is the name of the browser.

To check if the user is using Internet Explorer for example do this.

if($.browser.msie) 

The previous example returns true or undefined.

To check for Firefox use "mozilla" instead of "msie" or use "webkit" or "safari" for Google Chrome and Safari respectively.

Check Version Of Browser

The next key of the $.browser array you might want to use is "version", this returns the version of the browser the person is using.

Example:

alert($.browser.version); // displays browser version, works with all browsers.

About Other Browsers

You can always check all the keys the $.browser property has made available to you for the browser you are loading the script with. Run The following code to see what I mean.

$.each($.browser, function(key,value){
	alert("Key: "+key+". Value: "+value);
});

Usage Example

Here’s a quick snippet that will help you deal with IErs.

<html>
<head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	if($.browser.msie)
	{
		alert("There are better browsers you know");
		if($.browser.version<8)
		{
			alert("Not only does your browser suck but you are using an old version of it!");
		}
	}
});
</script>
</body>
</head>
</html>
blog comments powered by Disqus