JavaScript Browsers Handling

learning javascript

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>

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

You may like:  Enabling JavaScript in Browsers

One thought on “JavaScript Browsers Handling”

  1. Do you have any example page about this code?

    I have problems in my system (http://festi.tours) with the old versions of some browsers and I will put a detector created by me in ASP, maybe it is JavaScript, but first I need to know “when it is old” and “when it is new”.

    Using… [ Request.ServerVariables (“HTTP_USER_AGENT”) ] …I can detect all the data in the browser, and extract: Chrome / ## Safari / ## etc. But the problem is that there is no global-record that tells you which is the latest version of each browser.

    There is this on the internet (good idea):

    https://updatemybrowser.org/

    But it is not customizable to other languages.

Leave a Reply

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