js笔记系列之--Navigator对象理解及判断

高胜山发布于2019-08-22 15:20 / 913人阅读

摘要：入门系列之位置及相对位置事件坐标对象在写前端页面的时候，我们会碰到不同浏览器下不同逻辑的情况。指明系统是否处于脱机模式的布尔值。运行浏览器的操作系统平台。由客户机发送服务器的头部的值。

js入门系列之

位置及相对位置事件坐标

Navigator对象
在写前端页面的时候，我们会碰到不同浏览器下不同逻辑的情况。这个时候我们就有必要通过js代码来确认当前浏览器的种类以及版本，这个时候我们就需要借助窗口中的navigaitor对象。首先我们来了解一下navigator，在控制栏输出看一下：

下面我们来解释一下对象中对应各属性的概念：

appCodeName    浏览器的代码名。
appMinorVersion    浏览器的次级版本。
appName    浏览器的名称。
appVersion    浏览器的平台和版本信息。
browserLanguage    当前浏览器的语言。
cookieEnabled    指明浏览器中是否启用 cookie 的布尔值。
cpuClass    浏览器系统的 CPU 等级。
onLine    指明系统是否处于脱机模式的布尔值。
platform    运行浏览器的操作系统平台。
systemLanguage     OS 使用的默认语言。
userAgent    由客户机发送服务器的 user-agent 头部的值。
userLanguage    OS 的自然语言设置。

了解了navigator下对应的属性信息，我们可以获取很多有效的信息，比如当前的浏览器、浏览器版本以及当前电脑操作系统等等~是不是很棒棒呢~下面我们来写一段简单的代码来判断当前的浏览器：

var UserAgent =window.navigator.userAgent.toLowerCase();
function getBrowserType(UserAgent){
var result={
      isIE6: /msie 6.0/.test(UserAgent), // IE6
      isIE7: /msie 7.0/.test(UserAgent), // IE7
      isIE8: /msie 8.0/.test(UserAgent), // IE8
      isIE9: /msie 9.0/.test(UserAgent), // IE9
      isIE10: /msie 10.0/.test(UserAgent), // IE10
      isIE11: /msie 11.0/.test(UserAgent), // IE11
      isLB: /lbbrowser/.test(UserAgent), // 猎豹浏览器
      isUc: /ucweb/.test(UserAgent), // UC浏览器
      is360: /360se/.test(UserAgent), // 360浏览器
      isBaidu: /bidubrowser/.test(UserAgent), // 百度浏览
      isSougou: /metasr/.test(UserAgent), // 搜狗浏览器
      isChrome: /chrome/.test(UserAgent), 
      //Chrome浏览器
      isFirefox: /firefox/.test(UserAgent), // 火狐浏览器
      isOpera: /opera/.test(UserAgent), // Opera浏览器
      isSafiri: /safari/.test(UserAgent) && !/chrome/.test
 (UserAgent), // safire浏览器
      isQQ: /qqbrowser/.test(UserAgent)//qq浏览器
    };
 return result;
}
console.log(getBrowserType(UserAgent));

下图则是代码运行的结果：

就这样，我们可以简单的判断当前浏览器的种类从而达到分浏览器处理的效果了~

GPU云服务器云服务器深入理解系列系列之系列之二架构之坑系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93377.html

JS系列之BOM

摘要：顾名思义，父对象始终指向当前框架的直接上层框架。与框架有关的最后一个对象是，它始终指向实际上，和对象可以互换使用。同时，这也意味着可以将不同层次的对象连缀起来，例如。对象就是判断用户的浏览器以及操作系统。 BOM BOM Browser Object Model, 浏览器对象模型showImg(https://segmentfault.com/img/bVbjS3b?w=663&h=4...

edagarli 2019-08-26 13:25 评论0 收藏0
慕课网js面试题学习笔记(ES6 标准) ——实时更新

摘要：而第一种方法只能判断引用类型，不能判断值类型，因为值类型没有对应的构造函数描述一个对象的过程生成一个新的空对象指向这个新对象执行构造函数中的代码，即对赋值将新对象的属性指向构造函数的属性返回，即得到新对象。最近在在看前端面试教程，这篇文章里大部分是看视频的过程中自己遇到的不清楚的知识点，内容很简单，只是起到一个梳理作用。有些地方也根据自己的理解在作者的基础上加了点东西，如有错误，欢迎...

netmou 2019-08-20 18:10 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
JavaScript 之 BOM

摘要：描述表示为浏览器对象模型是由一系列对象构成的，这些对象可以理解为是浏览器提供的对象表示当前运行页面的浏览器对象既是访问浏览器的窗口，也是规范中的全局对象对象测试对象全局变量函数作为全局变量或函数使用的话全局变量是对象的属性函数是对象的方法预 BOM 描述 BOM表示为浏览器对象模型 BOM是由一系列对象构成的，这些对象可以理解为是浏览器提供的 Window对象表示当前运行HTM...

nifhlheimr 2019-08-23 11:44 评论0 收藏0