如何使用JavaScript的userAgent属性判断浏览器类型

我们先来看一下userAgent属性的基本语法

window.navigator.userAgent;

通过这样就可以获得描述浏览器信息的“字符串”作为返回值。

重点是将信息作为字符串获取到最后！

因此，有必要使用诸如indexOf()之类的方法在字符信息中提取浏览器的类型和版本。

如何获取浏览器信息？

让我们创建一个实际获取浏览器类型的程序！

首先从userAgent属性获取浏览器信息开始。

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

方法①和平常一样使用userAgent属性,不过，②最后执行的是toLowerCase()。

实际上，获取的浏览器信息是大写和小写字母的混合字符串，因此基本上将它全部用小写或大写字母更容易判断。

因此，一般来说，我会用方法②写下来！

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

在这个例子中，使用了indexOf()确认取得了浏览器信息「chrome」的文字是否存在。

如果没有，则返回“-1”，如果存在，则返回“字符位置”。

因此，通过“> -1”的比较，可以得到“true / false”，所以可以进行判定。

浏览器的判断

目前，有各种浏览器，例如“IE”，“Chrome”，“Safari”，“Firefox”为主流浏览器

让我们看看如何判断每个浏览器！

一般来说，基本上是通过IF语句按顺序判断每个浏览器名称。

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('其他浏览器');
}

在此示例中，使用userAgent获取浏览器信息，并且indexOf()按顺序判断每个浏览器名称。

我们在开始时介绍了一点，但比较的顺序是很重要的！

实际上，当您使用userAgent属性检查Edge浏览器时，它包含字符“chrome”和“safari”。

此外，查看Chrome浏览器包含“safari”一词。

这样，有些情况下会包含与原始浏览器不同的名称，因此有必要首先比较要调查的浏览器。

基本上，至少让我们保证“Edge”→“Chrome”→“Safari”的顺序！