JS中的Navigator 对象
Navigator 对象包含有关浏览器的信息。
很多时候我们需要在判断网页所处的浏览器和平台,Navigator为我们提供了便利
Navigator常见的对象属性如下:
属性 | 描述 |
---|---|
appCodeName | 返回浏览器的代码名。 |
appMinorVersion | 返回浏览器的次级版本。 |
appName | 返回浏览器的名称。 |
appVersion | 返回浏览器的平台和版本信息。 |
browserLanguage | 返回当前浏览器的语言。 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
cpuClass | 返回浏览器系统的 CPU 等级。 |
onLine | 返回指明系统是否处于脱机模式的布尔值。 |
platform | 返回运行浏览器的操作系统平台。 |
systemLanguage | 返回 OS 使用的默认语言。 |
userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 |
userLanguage | 返回 OS 的自然语言设置。 |
我们使用的比较多的是他的userAgent,经常需要判断的情况有:
(1)PC还是移动端
(2)安卓还是IOS
(3)浏览器的类型
示例代码:
1 var browser={
2 versions:function(){
3 var u = navigator.userAgent, app = navigator.appVersion;
4 return { //移动终端浏览器版本信息
5 trident: u.indexOf('Trident') > -1, //IE内核
6 presto: u.indexOf('Presto') > -1, //opera内核
7 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
8 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
9 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
10 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
11 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
12 iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
13 iPad: u.indexOf('iPad') > -1, //是否iPad
14 webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
15 };
16 }(),
17 language:(navigator.browserLanguage || navigator.language).toLowerCase()
18 }
判断是否移动端
1 if(browser.versions.mobile){
2 console.log('我是移动端');
3 }
还可以用另一种方式判断
1 var s=document.hasOwnProperty("ontouchstart");//电脑返回false,手机为true
2 console.log(s);
判断安卓还是IOS
1 if(browser.versions.ios){
2 console.log('我是IOS');
3 }
4 if(browser.version.andriod){
5 console.log('我是安卓');
6 }
判断浏览器的类型
1 if(browser.versions.trident){
2 console.log('我是IE');
3 }
4 if(browser.versions.presto){
5 console.log('我是opera');
6 }
7 if(browser.versions.webKit){
8 console.log('我是苹果和谷歌');
9 }
10 if(browser.versions.gecko){
11 console.log('我是火狐');
12 }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了