• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

How To Detect Browser using JavaScript

April 11, 2014 //  by Krishna Srinivasan//  Leave a Comment

Browser compatibility is one of the key challenge for implementing the JavaScript functions. There are number of objects and methods which are not part of the standard and supported by the browsers which are not commonly used across all the browsers. If you take an example of AJAX calls, this functionality has to be implement in different way for IE and Firefox because each browser use the different methods. This tutorial explains how to get the browser details using the navigator object.

JavaScript is supported by the following browsers:

  • Mozilla Firefox
  • Google Chrome
  • Internet Explorer(above 3.0 version)
  • Safari
  • Opera
  • Netscape Navigator(above 2.0 version)

To get information about browser which is currently running in the web page, we use navigator object.

Navigator Object Properties

The following properties are:

  • appName: It specifies name of the browser.
  • appCodeName: It returns code name of the browser.
  • appVersion: It returns version of the browser.
  • language: It indicates default language of the browser.
  • mimeTypes: it is used to return mime types supported by the browser.
  • platform: It indicates the platform in which browser is running.
  • plugins: It indicates plug-ins that are installed on the browser.
  • userAgent It specifies user agent header.

Navigator Object Methods

  • javaEnabled: It indicates whether java is enabled or not. It returns boolean value.
  • taintEnabled: It indicates whether data taint is enabled or not.
  • plug-ins.refresh: It indicates newly installed plug-ins available. Its only in Netscape browser.

Browser Detection Example

[code lang=”html”] <!DOCTYPE html>
<head>
<title>Browser Compatibility</title>
</head>
<body>
<script type="text/javascript">
var userAg = navigator.userAgent;
if (userAg.indexOf("Chrome") != -1) {
document.write("Google Chrome <br><br>");
} else if (userAg.indexOf("Firefox")!=-1) {
document.write("Mozilla Firefox <br><br>");
} else if (userAg.indexOf("Opera")!=-1) {
document.write("Opera <br>");
} else if (userAg.indexOf("MSIE")!=-1) {
document.write("Internet Explorer <br><br>");
} else if (userAg.indexOf("Safari")!=-1) {
document.write("Safari <br><br>");
} else {
document.write("unknown browser <br><br>");
}
document.write("Browser Version is :" + navigator.appVersion+ "<br><br>");
document.write(navigator.appName + "<br><br>");
document.write(navigator.appCodeName + "<br><br>");
document.write(navigator.platform + "<br><br>");
</script>
</body>
</html>
[/code]
  • <script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
  • var userAg = navigator.userAgent; line indicates user agent header.
  • if (userAg.indexOf(“Chrome”) != -1) {document.write(“Google Chrome”);} line contains indexOf which refers to method on collection such as dictionary, hash table etc and when collection doesn’t include “Chrome” it returns -1 value and this is same for above different browsers.
  • document.write(“Browser Version is :” + navigator.appVersion); line indicates version of the browser.
  • document.write(navigator.appName+ “<br><br>”); line indicates name of the browser.
  • document.write(navigator.appCodeName + “<br>”); line indicates code name of the browser.
  • document.write(navigator.platform + “<br>”); line indicates the platform in which browser is running.

JavaScript Browser Detection Demo

  • Save the file as browser_compatibility.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML specification.

When the execution process is completed successfully we will get the following output (for Chrome browser):

JavaScript Browser Detection Demo

Open the file in Mozilla Firefox browser, the following output appears:
JavaScript Browser Detection Demo 1

Category: JavaScriptTag: JavaScript Tutorials

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Custom Objects in JavaScript
Next Post: Primefaces AccordionPanel Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact