Post
Ask Question

Find Browser And Browser Version Using jQuery

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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Find Browser In JQuery - Sibeesh Passion</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     Find Browser In JQuery - Sibeesh Passion  
  10. </body>  
  11.   
  12. </html>  
Then you need to include the needed script.
  1. <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>  
  2. <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.
  1. <script>  
  2.     $(document).ready(function() {  
  3.         if ($.browser.webkit) {  
  4.             alert("Hooray WebKit!" + " Version: " + $.browser.version);  
  5.         } else if ($.browser.msie) {  
  6.             alert("Hooray IE!" + " Version: " + $.browser.version);  
  7.         } else if ($.browser.mozilla) {  
  8.             alert("Hooray mozilla!" + " Version: " + $.browser.version);  
  9.         }  
  10.         $.each($.browser, function(i, val) {  
  11.             $("<div>" + i + " : <span>" + val + "</span>")  
  12.                 .appendTo(document.body);  
  13.         });  
  14.     });  
  15. </script>  
We are appending the browser details to the DOM. So that it is always better to use some CSS to improve the readability.
  1. <style>  
  2.     div {  
  3.         width: 500px;  
  4.         border: 1px solid #ccc;  
  5.         border-radius: 5px;  
  6.         padding: 10px;  
  7.         margin: 10px;  
  8.         box-shadow: 1px 1px 1px #999;  
  9.         color: #f90;  
  10.         font-style: oblique;  
  11.         text-align: center;  
  12.     }  
  13. </style>  
Now please run your browser, you can see the following output.

alert

find browser version

find browser

Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Find Browser In JQuery - Sibeesh Passion</title>  
  6.     <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>  
  7.     <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>  
  8.     <script>  
  9.         $(document).ready(function() {  
  10.             if ($.browser.webkit) {  
  11.                 alert("Hooray WebKit!" + " Version: " + $.browser.version);  
  12.             } else if ($.browser.msie) {  
  13.                 alert("Hooray IE!" + " Version: " + $.browser.version);  
  14.             } else if ($.browser.mozilla) {  
  15.                 alert("Hooray mozilla!" + " Version: " + $.browser.version);  
  16.             }  
  17.             $.each($.browser, function(i, val) {  
  18.                 $("<div>" + i + " : <span>" + val + "</span>")  
  19.                     .appendTo(document.body);  
  20.             });  
  21.         });  
  22.     </script>  
  23.     <style>  
  24.         div {  
  25.             width: 500px;  
  26.             border: 1px solid #ccc;  
  27.             border-radius: 5px;  
  28.             padding: 10px;  
  29.             margin: 10px;  
  30.             box-shadow: 1px 1px 1px #999;  
  31.             color: #f90;  
  32.             font-style: oblique;  
  33.             text-align: center;  
  34.         }  
  35.     </style>  
  36. </head>  
  37.   
  38. <body>  
  39.     Find Browser In JQuery - Sibeesh Passion  
  40. </body>  
  41.   
  42. </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.

 


Similar Articles