javascript browser detection

Browser detection is very useful in cases where you have advanced CSS3 and Javascript animation effects added in your page which are not supported on some of the browers. In such scenario, you can check the browser using javascript and load a much simpler page in those browsers.

Browser name, version, etc. can be detected using Javascript Navigator methods. Lets see, how we can do that.

Detect Browser Name

navigator.appName() method returns the name of the browser in Javascript.

<script>
browsername=navigator.appName;
if (browsername.indexOf("Netscape")!=-1) {
  browsername="NS";
}else if (browsername.indexOf("Microsoft")!=-1) {
  browsername="MSIE";
}else {
  browsername="NA";
};
</script>

The function indexOf() checks for the first appearance string defined inside the parenthesis() and returns value -1 incase the string is not found.

Detect Browser Version

In some cases, we might also need to check for the browser version before determining the page to load in that browser. navigator.appVersion() detects the browser version in javascript but it not only holds the version number but a whole string like 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36, So, we need to use indexOf() method to retrieve the first numerical value and make further processing convenient. We'll also asign a default value for cases where the browser version is not available as per our conditional statement.

<script>
browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {
  browserversion="2"
};
if (navigator.appVersion.indexOf("3.")!=-1) {
  browserversion="3"
};
if (navigator.appVersion.indexOf("4.")!=-1) {
  browserversion="4"
};
if (navigator.appVersion.indexOf("5.")!=-1) {
  browserversion="5"
};
if (navigator.appVersion.indexOf("6.")!=-1) {
  browserversion="6"
};
</script>

Load Different Pages for Different Browser Versions

<script>
if (browsername=="NS") {
  window.location="index1.html";
};
if (browsername=="MSIE"){
  if (browserversion<7){
      window.location="index2.html";
  } else {
      window.location="index3.html";
  }
};
if (browsername=="N/A") {
  window.location="index3.html";
};
</script>

Whole Code

<script>
// checks browser name
browsername=navigator.appName;
if (browsername.indexOf("Netscape")!=-1) {
  browsername="NS";
}else if (browsername.indexOf("Microsoft")!=-1) {
  browsername="MSIE";
}else {
  browsername="NA";
};
// checks browser version
browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {
  browserversion="2"
};
if (navigator.appVersion.indexOf("3.")!=-1) {
  browserversion="3"
};
if (navigator.appVersion.indexOf("4.")!=-1) {
  browserversion="4"
};
if (navigator.appVersion.indexOf("5.")!=-1) {
  browserversion="5"
};
if (navigator.appVersion.indexOf("6.")!=-1) {
  browserversion="6"
};
// determines which page is to be loaded
if (browsername=="NS") {
  window.location="index1.html";
};
if (browsername=="MSIE"){
  if (browserversion<7){
      window.location="index2.html";
  } else {
      window.location="index3.html";
  }
};
if (browsername=="N/A") {
  window.location="index3.html";
};
</script>

In this way, you can define different pages to be loaded on different bowsers depending on their name or versions.

0 Like 0 Dislike 0 Comment Share Tweet