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

判断浏览器的类型我们可以使用javascript中提供的navigator对象的useragent属性,它是唯一可以获取运行javascript 的浏览器类型和版本等信息的属性,使用简单方便,但是如果做出错误的浏览器判断顺序则容易出错,因此必须要小心。

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

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

  1. window.navigator.userAgent;

登录后复制

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

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

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

立即学习“Java免费学习笔记(深入)”;

如何获取浏览器信息?

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

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

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

登录后复制

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

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

因此,一般来说,我会用方法②写下来!

  1. 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语句按顺序判断每个浏览器名称。

  1. 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”的顺序!

以上就是如何使用JavaScript的userAgent属性判断浏览器类型的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    如何使用getElementsByClassName()从类名中获取多个HTML元素

    2025-3-8 1:05:13

    编程技术

    如何实现jQuery进度条效果

    2025-3-8 1:05:19

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索