Find Browser And Browser Version Using jQuery

Sibeesh Venu

11y17.3k20100Article

jQueryFind Browser using jQueryFind Browser Version using jQuery

20 Comments

Join the conversation! Your thoughts help the community grow.

Omid Nasri10y ago
Good one
Santhakumar Munuswamy11y ago
Good one
Sibeesh Venu11y ago
Gowtham K Thanks a lot
Sibeesh Venu11y ago
Gopi Chand Thanks a lot
Sibeesh Venu11y ago
Rakesh Chavda Thanks a lot
Sibeesh Venu11y ago
Mukesh Kumar Thanks a lot
Sibeesh Venu11y ago
Jacob Robinson Thanks a lot
Sibeesh Venu11y ago
Debendra Dash Thanks a lot
Sibeesh Venu11y ago
Nilesh Jadav Thanks a lot
Gowtham K11y ago
Nice Share
Gopi Chand11y ago
Excellent work Sibeesh
Rakesh11y ago
Good share
Mukesh Kumar11y ago
Good one
Jacob Robinson11y ago
Nice One...
Debendra Dash11y ago
good one...
Nilesh Jadav11y ago
Great work sir
Sibeesh Venu11y ago
Rajeesh Menoth Thank you
Sibeesh Venu11y ago
Harshad Pansuriya Thank you
Rajeesh Menoth11y ago
Nice Share!
Harshad Pansuriya11y ago
Nice one

Here we will be using $.browser property og jQuery which returns the browser information. In this demo we will test this in most used browsers such as Internet Explorer, Mozilla, Chrome, Opera, etc. I hope you will like this.

Please see this article in my blog here.

NB: Using $.browser is not recommended by jQuery itself, so this feature has been moved to the jQuery.migrate plugin which is available for downloading if the user want. It is a vulnerable practice to use the same. Use it only if needed. It is always better to not use browser specific codes.

Using the code

First thing you need to do is create a page.

<!DOCTYPE html>
<html>
<head>
<title>Find Browser In JQuery - Sibeesh Passion</title>
</head>
<body>
Find Browser In JQuery - Sibeesh Passion
</body>
</html>

Then you need to include the needed script.

<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

As you have noticed I have included the code. It is just because this feature is deprecated and moved to this js.

Now you need to write the following script.

<script>
$(document).ready(function() {
if ($.browser.webkit) {
alert("Hooray WebKit!" + " Version: " + $.browser.version);
} else if ($.browser.msie) {
alert("Hooray IE!" + " Version: " + $.browser.version);
} else if ($.browser.mozilla) {
alert("Hooray mozilla!" + " Version: " + $.browser.version);
}
$.each($.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body);
});
});
</script>

We are appending the browser details to the DOM. So that it is always better to use some CSS to improve the readability.

<style>
div {
width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
color: #f90;
font-style: oblique;
text-align: center;
}
</style>

Now please run your browser, you can see the following output.

alert

Complete Code

<!DOCTYPE html>
<html>
<head>
<title>Find Browser In JQuery - Sibeesh Passion</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script>
$(document).ready(function() {
if ($.browser.webkit) {
alert("Hooray WebKit!" + " Version: " + $.browser.version);
} else if ($.browser.msie) {
alert("Hooray IE!" + " Version: " + $.browser.version);
} else if ($.browser.mozilla) {
alert("Hooray mozilla!" + " Version: " + $.browser.version);
}
$.each($.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body);
});
});
</script>
<style>
div {
width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
color: #f90;
font-style: oblique;
text-align: center;
}
</style>
</head>
<body>
Find Browser In JQuery - Sibeesh Passion
</body>
</html>

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to find out the browser details on client side? Could you find this post useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

If you have any questions, then please mention it in the comments section.