Navigator对象，获取浏览器类型userAgent，机器类型platform_navigator.platform

@Navigator对象

$属性

• navigator.appCodeName // 浏览器名称 大多都是Mozilla
• navigator.appName // 完整的浏览器名称
• navigator.appVersion // 浏览器版本，一般不与实际的浏览器版本对应
• navigator.cookieEnabled // 表示cookie是否启用
• navigator.cpuClass // 客户端计算机使用的CPU类型
• navigator.javaEnabled() // 表示当前浏览器中是否启用了java
• navigator.language // 浏览器的主语言
• navigator.systemLanguage // 操作系统的语言
• navigator.userLanguage // 操作系统的默认语言
• navigator.mimeTypes // 在浏览器中注册的MIME类型的数组
• navigator.onLine // 浏览器是否联网
• navigator.platform // 浏览器所在的系统平台
• navigator.plugins // 浏览器中安装的插件信息的数组
• navigator.product // 产品名称(如Gecko)
• navigator.productSub // 关于产品的次要信息(如Gecko的版本)
• navigator.vendor // 浏览器的品牌
• navigator.vendorSub // 有关供应商的次要信息
• navigator.registerProtocolHandler() // 针对特定的协议，将一个站点注册为处理程序
• navigator.oscpu 返回当前操作系统名。
• navigator.userAgent // 浏览器的用户代理信息

$方法

javaEnabled()　　规定浏览器是否支持并启用了 java

taintEnabled()　　规定浏览器是否启用数据污点(data tainting)
1
2
3

一、获取浏览器用户代理信息navigator.userAgent

const userAgent = navigator.userAgent;
      console.log(userAgent);
//我这用的谷歌
//Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
1
2
3
4

二、获取运行浏览器的操作系统或硬件平台navigator.platform

const platform = navigator.platform;
      console.log(platform);
      //Win32
1
2
3

三、 判断浏览器类型

1. （Opera、Firefox、Chrome、Safari）

let userAgent= navigator.userAgent;//获取
console.log(userAgent);
if (userAgent.indexOf("Opera") > -1) {	// 判断是否是Opera浏览器
   console.log("Opera");
};
if (userAgent.indexOf("Firefox") > -1) { // 判断是否是Firefox浏览器
   console.log("Firefox");
}
if (userAgent.indexOf("Chrome") > -1) { // 判断是否是Chrome浏览器
   console.log("Chrome");
}
if (userAgent.indexOf("Safari") > -1) {	// 判断是否是Safari浏览器
   console.log("Safari");
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
   console.log("IE");      // 判断是否是IE浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. 判断是Android或者iOS

 if (/(Android)/i.test(navigator.userAgent)) {
    return 'Android'

  } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    return 'iOS'
  }

1
2
3
4
5
6
7

3. 判断是否是微信浏览器

if (/(MQQBrowser)/i.test(navigator.userAgent)) {
    return true

  } else {
    return false

  }
1
2
3
4
5
6
7

 if (/(micromessenger)/i.test(navigator.userAgent)) {
    return true

  } else {
    return false

  }
1
2
3
4
5
6
7

四、判断是手机端、平板还是PC

const type = function (){
    var ua = navigator.userAgent,

    isWindowsPhone = /(?:Windows Phone)/.test(ua),

    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,

    isAndroid = /(?:Android)/.test(ua),

    isFireFox = /(?:Firefox)/.test(ua),

    isChrome = /(?:Chrome|CriOS)/.test(ua),

    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),

    isPhone = /(?:iPhone)/.test(ua) && !isTablet,

    isPc = !isPhone && !isAndroid && !isSymbian;

    return {
        isTablet: isTablet,

        isPhone: isPhone,

        isAndroid: isAndroid,

        isPc: isPc

    };

}();

if (type.isAndroid || type.isPhone) {
  console.log("手机")

} else if (os.isTablet) {
  console.log("平板")

} else if(os.isPc) {
  console.log("电脑")

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

五、 判断手机机型（移动端解决兼容问题常用）

    const type = navigator.userAgent
    const phone = type.indexOf("Android") > -1 || 
                    type.indexOf("Adr") > -1
	console.log(phone)
1
2
3
4

六、通过屏幕尺寸来进行浏览器类型判断