How to use JavaScript’s userAgent attribute to determine browser type

To determine the type of browser, we can use the userAgent attribute of the Navigator object provided in JavaScript. It is the only attribute that can obtain information such as the type and version of the browser running JavaScript. It is simple and convenient to use, but if you make the wrong browsing It is easy to make mistakes when judging the order of the processor, so care must be taken.

Let’s first take a look at the basic syntax of the userAgent attribute

window.navigator.userAgent;

In this way, you can get the "characters" that describe the browser information String" as the return value.

The point is to get the information as a string to the end!

Therefore, it is necessary to use methods such as indexOf() to extract the browser type and version in the character information.

How to obtain browser information?

Let's create a program that actually gets the browser type!

Start by getting the browser information from the userAgent attribute.

//方法①
var agent = window.navigator.userAgent;
//方法②
var agent = window.navigator.userAgent.toLowerCase();

Method ① Use the userAgent attribute as usual, but ② finally executes toLowerCase().

Actually, the browser information obtained is a mixed string of uppercase and lowercase letters, so it is easier to judge basically having it all in lowercase or uppercase letters.

So, generally speaking, I will use method ② to write it down!

var agent = window.navigator.userAgent.toLowerCase();
var result = agent.indexOf('chrome') > -1;
console.log(result);

In this example, indexOf() is used to confirm whether the text "chrome" obtained from the browser information exists.

If not, return "-1", if present, return "character position".

Therefore, through the comparison of "> -1", "true / false" can be obtained, so the judgment can be made.

Browser Judgment

Currently, there are various browsers, such as "IE", "Chrome", "Safari", and "Firefox" as the mainstream browsers

Let’s see how each browser is judged!

Generally speaking, each browser name is basically judged in order through the IF statement.

var agent = window.navigator.userAgent.toLowerCase();
if(agent.indexOf('msie') > -1) { 
  console.log('IE浏览器'); 
} else if(agent.indexOf('edge') > -1) { 
  console.log('Edge浏览器');
} else if(agent.indexOf('chrome') > -1) {
  console.log('Chrome浏览器');
} else if(agent.indexOf('safari') > -1) {
  console.log('Safari浏览器');
} else if(agent.indexOf('firefox') > -1) {
  console.log('Firefox浏览器');
} else {
  console.log('其他浏览器');
}

In this example, userAgent is used to obtain browser information, and indexOf() determines each browser name in order.

We introduced a little bit at the beginning, but the order of comparison is very important!

Actually, when you inspect the Edge browser using the userAgent attribute, it contains the characters "chrome" and "safari".

Also, check that Chrome contains the word "safari".

In this way, some cases will contain names that are different from the original browser, so it is necessary to first compare the browsers to be investigated.

Basically, let’s at least guarantee the order of “Edge” → “Chrome” → “Safari”!

The above is the detailed content of How to use JavaScript’s userAgent attribute to determine browser type. For more information, please follow other related articles on the PHP Chinese website!