JavaScript Browsers Handling

In this tutorial, you can get knowledge of JavaScript Browsers Handling or Compatibility and how to handle JavaScript in different browsers.

Before applying JavaScript, we need to know the differences between different browsers and how they can be handled in different way.
You can use built-in navigator object to get the information about the browser in which your webpage will be running.

In you webpage, there are several Navigator related properties that you may use in your Web page.

<ul>
<li>appCodeName</li>
<li>appVersion</li>
<li>language</li>
<li>mimTypes[]</li>
<li>platform[]</li>
<li>plugins[]</li>
<li>userAgent[]</li>
</ul>

Similar like properties, there are several Navigator-specific methods.

<ul>
<li>javaEnabled()</li>
<li>plugings.refresh</li>
<li>preference(name,value)</li>
<li>taintEnabled()</li>
</ul>

Browser Names:

To return the name of the browser, use the properties appName and appCodeName:

<script>
console.log("Name: " + navigator.appName);
console.log("Code: " + navigator.appCodeName);
</script>

The product property returns browser engine:

<script>
console.log("Browser engine: " + navigator.product);
</script>

The language property returns the browser’s language:

<script>
console.log("Language: " + navigator.language);
</script>

Read Also: Enabling JavaScript in Browsers

Let’s see an example to determine name of a browser.

<html>
<head>
<title>JavaScript Browsers Handling</title>
</head>
<body>
<script type="text/javascript">
var userAgent   = navigator.userAgent;
var opera       = (userAgent.indexOf('Opera') != -1);
var ie          = (userAgent.indexOf('MSIE') != -1);
var gecko       = (userAgent.indexOf('Gecko') != -1);
var netscape    = (userAgent.indexOf('Mozilla') != -1);
var version     = navigator.appVersion;

if (opera){
console.log("Opera browser");
}
else if (gecko){
console.log("Mozilla browser");
}
else if (ie){
console.log("Internet Explorer browser");
}
else if (netscape){
console.log("Netscape browser");
}
else{
console.log("Unknown browser");
}
console.log("Browser version info : " + version);
</script>
</body>
</html>

Output:
Mozilla browser
Browser version info : 5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

The userAgent property userAgent also returns browser version information:

<script>
console.log("Browser version: " + navigator.userAgent);
</script>