每个页面浏览器会实例出一个window对象,在window对象下有一个属性navigator,navigator本身是一个对象,navigator对象上有一个属性userAgent里面包含了当前浏览器的信息;

console.log(window.navigator.userAgent) 会在控制台打印出一条信息:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36  //Chrome浏览器55.0.2883.87 (64-bit)版本下打印出来的信息

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393 //Edge 打印出来的信息

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0  //firefox 打印出来的信息

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko  //Ie11 打印出来的信息(其他版本大家可以自己去试一下)

判断浏览器是那种浏览器的基本思路是这样的

function BrowserType(){

  var userAgent=window.navigator.userAgent

  if(userAgent.indexOf('Edge')>-1){

    return 'Edge'  

  }

  if(userAgent.indexOf('Firefox')>-1){

    return 'Firefox'

  }

  if(userAgent.indexOf('Chrome')>-1){

    return 'Chrome'

  }

  if(userAgent.indexOf('.NET')>-1){

    return 'IE'

  }

}

当然了浏览器经常更新厂商也很多,但是判断的思路大致相同。大家可以去尝试一下。

前端如何通过js判断浏览器的类型(忽略版本)web html css javascript的更多相关文章

  1. js判断浏览器的类型,动态调整div布局

    最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function sc ...

  2. js判断浏览器的类型

    我们很多时候都需要判断浏览器,下面就是一些常用的判断 var ua = navigator.userAgent.toLowerCase(); //用来判断移动端类型 var isWeixin = /M ...

  3. js判断浏览器的类型和获得浏览器的版本

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  4. js 判断浏览器的类型

    function getBrowser() {    var Sys = {};    var ua = navigator.userAgent.toLowerCase();    var s;    ...

  5. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  6. JS判断浏览器类型及版本

    浏览器 ie firefox opera safari chrome 分类: 一路辛酸---JavaScript 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, S ...

  7. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  8. js判断浏览器类型以及版本

    你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器. 几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的 ...

  9. JS判断浏览器类型与版本

    在JS中判断浏览器的类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常需要根据不同的浏 ...

随机推荐

  1. Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格

    Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格 在 Excel Power Query 未出来之前,把文件夹下所有文件合并为一个与合并同一工作表中的多个工作表,需要用 V ...

  2. 宏参数(Arguments)的扩展

    宏分为两种,一种是 object-like 宏,比如: #define STR "Hello, World!" 另一种是 function-like 宏,比如: #define M ...

  3. 前端面试题(js)

    js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...

  4. Redis 中的 set 和 sorted set 如何使用,源码实现分析

    set 和 sorted set 前言 set 常见命令 set 的使用场景 看下源码实现 insert dict sorted set 常见的命令 使用场景 分析下源码实现 ZADD ZRANGE ...

  5. Java基础——ArrayList

    Java基础--ArrayList 作用:提供一个可变长度的集合,底层实际上是一个可变长度的数组 格式:ArrayList <E> arr=new ArrayList<>(); ...

  6. 常见的url编码

    URL编码值 字符 %20 空格 %22 " %23 # %25 % %26 &; %28 ( %29 ) %2B + %2C , %2F / %3A : %3B ; %3C < ...

  7. 什么是内部类?Static Nested Class和Inner Class的不同?

    内部类就是在一个类的内部定义的类,内部类中不能定义静态成员,内部类可以直接访问外部类中的成员变量,内部类可以定义在外部类的方法外面,也可以定义在外部类的方法体中.在方法外部定义的内部类前面可以加上st ...

  8. 如何实现数组与List的相互转换?在 Queue 中 poll()和 remove()有什么区别?哪些集合类是线程安全的?

    如何实现数组与List的相互转换? List转数组:toArray(arraylist.size()方法 数组转List:Arrays的asList(a)方法 /** * 〈一句话功能简述〉; * 〈 ...

  9. 面试问题之C++语言:说一说C++中四种cast转换

    C++中四种类型转换是:static_cast.dynamic_cast.const_cast.reinterpret_cast 1.const_cast 常量转换,用于将const变量转为非cons ...

  10. 转载:23种常用设计模式的UML类图

    转载至:https://www.cnblogs.com/zytrue/p/8484806.html 23种常用设计模式的UML类图 本文UML类图参考<Head First 设计模式>(源 ...