js 查看浏览器信息，浏览器信息查看方法分享

1. 为什么需要查看浏览器信息

在前端开发的过程中，我们有时需要获取浏览器的相关信息来进行一些特定的操作，例如调用特定的js库、适配不同的浏览器等等。因此，查看浏览器信息是我们开发过程中必备的操作之一。

2. 查看浏览器信息的方法

下面介绍几种常用的方法来查看浏览器信息。

2.1 window.navigator

window.navigator是一个包含浏览器相关信息的对象。通过该对象，我们可以获取到浏览器的名称、版本、操作系统等相关信息，具体如下：

```javascript

console.log('浏览器名称:', window.navigator.appName);

console.log('浏览器版本:', window.navigator.appVersion);

console.log('操作系统:', window.navigator.platform);

console.log('是否支持Cookie:', window.navigator.cookieEnabled);

```

2.2 window.location

window.location包含了当前浏览器的URL信息，例如当前URL地址、协议、主机名、端口号等等，具体如下：

```javascript

console.log('当前URL地址:', window.location.href);

console.log('协议:', window.location.protocol);

console.log('主机名:', window.location.hostname);

console.log('端口号:', window.location.port);

```

2.3 navigator.userAgent

navigator.userAgent是一个字符串，包含了浏览器相关的信息。我们可以通过正则表达式来解析该字符串，以获取到所需信息，例如：

```javascript

var userAgent = navigator.userAgent;

console.log(userAgent);

if(/Firefox/i.test(userAgent)){

console.log('这是Firefox浏览器');

} else if(/Chrome/i.test(userAgent)){

console.log('这是Chrome浏览器');

} else if(/MSIE/i.test(userAgent)){

console.log('这是IE浏览器');

} else if(/Safari/i.test(userAgent)){

console.log('这是Safari浏览器');

} else if(/Opera/i.test(userAgent)){

console.log('这是Opera浏览器');

}

```

3. 示例代码

下面是一段示例代码，展示了如何通过js来获取浏览器相关信息：

```javascript

(function() {

var browserType = '', // 浏览器类型

browserVer = '', // 浏览器版本

osType = '', // 操作系统类型

userAgent = navigator.userAgent; // 浏览器ua信息

// 获取浏览器类型和版本号

if (/Firefox/i.test(userAgent)) {

browserType = 'Firefox';

var r = /Firefox\/([\d.]+)/i;

var matches = userAgent.match(r);

if (matches && matches.length > 1) {

browserVer = matches[1];

}

} else if (/QQBrowser/i.test(userAgent)) {

browserType = 'QQBrowser';

var r = /QQBrowser\/([\d.]+)/i;

var matches = userAgent.match(r);

if (matches && matches.length > 1) {

browserVer = matches[1];

}

} else if (/MSIE/i.test(userAgent)) {

browserType = 'IE';

var r = /MSIE\s([\d.]+)/i;

var matches = userAgent.match(r);

if (matches && matches.length > 1) {

browserVer = matches[1];

}

} else if (/Chrome/i.test(userAgent)) {

browserType = 'Chrome';

var r = /Chrome\/([\d.]+)/i;

var matches = userAgent.match(r);

if (matches && matches.length > 1) {

browserVer = matches[1];

}

} else if (/Safari/i.test(userAgent)) {

browserType = 'Safari';

var r = /Safari\/([\d.]+)/i;

var matches = userAgent.match(r);

if (matches && matches.length > 1) {

browserVer = matches[1];

}

} else if (/Opera/i.test(userAgent)) {

browserType = 'Opera';

var r = /Opera\/([\d.]+)/i;

var matches = userAgent.match(r);

if (matches && matches.length > 1) {

browserVer = matches[1];

}

}

// 获取操作系统类型

if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent)) {

osType = 'iOS';

} else if (/(Android)/i.test(userAgent)) {

osType = 'Android';

} else if (/(Windows)/i.test(userAgent)) {

osType = 'Windows';

} else if (/(Macintosh)/i.test(userAgent)) {

osType = 'Macintosh';

}

console.log('浏览器类型：', browserType);

console.log('浏览器版本：', browserVer);

console.log('操作系统类型：', osType);

})();

```

4. 总结

本文介绍了三种常用的方法来查看浏览器信息，包括window.navigator、window.location和navigator.userAgent。同时，提供了一段示例代码，可以有效地获取到浏览器类型、版本以及操作系统类型等信息。对于前端开发人员来说，掌握这些技能对于开发和问题排查都是非常有帮助的。

文章TAG：查看  浏览  浏览器  信息  js  浏览器信息查看方法分享