通过JS判断当前浏览器的类型，对主流浏览器Chrome、Edge、Firefox、UC浏览器、QQ浏览器、360浏览器、搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器。

不同浏览器的userAgent值

chrome浏览器

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Edge浏览器

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763

QQ浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3722.400 QQBrowser/10.5.3739.400

UC浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36

360浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

搜狗浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 SE 2.X MetaSr 1.0

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

</head>

<body>

    <input id='btn' type='button' value='获取浏览器信息' />

    <div id='div1'></div>

    <script>

        var oBtn = document.getElementById('btn');

        var oDiv = document.getElementById('div1');

        var browserName = '';

        function brower() {

            /* 浏览器特征：Edge——Edge浏览器，QQBrowser-QQ浏览器，UBrowser-UC浏览器，Firefox-火狐浏览器，Trident-360浏览器，

             * 其它浏览器可能包含的特征：chrome-chrome浏览器

             *

             *

             *

             */

            var browserInf = navigator.userAgent.toLowerCase();

            if (browserInf.indexOf('edge') >= 0) {

                browserName = 'Edge浏览器';

            } else if (browserInf.indexOf('qqbrowser') >= 0) {

                browserName = 'QQ浏览器';

            } else if (browserInf.indexOf('ubrowser') >= 0) {

                browserName = 'UC浏览器';

            } else if (browserInf.indexOf('firefox') >= 0) {

                browserName = '火狐浏览器';

            } else if (browserInf.indexOf('trident') >= 0) {

                browserName = '360浏览器';

            } else if (browserInf.indexOf('chrome') >= 0) {

                browserName = 'Chrome浏览器';

            } else {

                browserName = '未知是什么鸟浏览器';

            }

            console.log(navigator.userAgent);//=>在控制台中查看navigator.userAgent

        }

        oBtn.onclick = function () {

            brower();

            oDiv.innerHTML = '浏览器为' + browserName;

        }

    </script>

</body>

</html>

　　

通过JS判断当前浏览器的类型的更多相关文章

  1. js判断当前浏览器语言类型

    console.log(window.navigator.language.slice(0, 2)); 得到的是zh

  2. 360极速浏览器UA怪异以及如何用js判断360浏览器

    本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...

  3. 笔记：1.css样式，最前边加 @charset "utf-8";是为什么2.js判断各种浏览器的方法

    表明CSS文件的页面编码为UTF-8..如果这个CSS的文件编码也是UTF-8的话..那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文,如果CSS的文件编码和页面不一致 ...

  4. js判断客户浏览器类型，版本

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

  5. 纯JS判断各种浏览器类型及版本.

    IE11或者非IE if (!document.all) { alert('IE11+ or not IE'); } IE10 if (document.all && document ...

  6. js判断主流浏览器类型和版本号

    如今的互联网中,浏览器可以说是太多太多了,但是大部分都是换壳不换心,基本上主流的浏览器还是火狐,谷歌,IE,safrai这几种比较常见,所以在我们的开发中,有时候需要遇到判断用户正在使用什么浏览器以及 ...

  7. JS判断客户浏览器是否是IE8浏览器、jQuery判断浏览器内核

    今天在使用encharts的时候由于要兼容IE8,所以最终决定在非IE8浏览器使用encharts,在IE8使用amcharts.于是需要使用JS判断使用的浏览器版本: function IEVers ...

  8. 判断访问浏览器客户端类型(pc,mac,ipad,iphone,android)

    <script type="text/javascript"> //平台.设备和操作系统 var system = { win: false, mac: false, ...

  9. js判断手机浏览器操作系统和微信浏览器的方法

    做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...

随机推荐

  1. Word+Excel 问题及解决

    [Word] 快捷操作 (1)每个字后面都有换行符的处理办法: 替换:∧p -> 空格 (2)隐藏Word文档中的换行符: word选项 -> 显示 -> 段落标记 [Excel]

  2. 浅谈Samsung Exynos4412处理器

    转载于:http://www.cnblogs.com/android210/archive/2013/01/16/2862349.html Topic:浅谈Samsung Exynos4412处理器( ...

  3. 实验四  CSS样式的应用

    实验四  CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...

  4. 多测师讲解python _函数中参数__高级讲师肖sir

    函数中讲解参数: 形参和实参的认识 函数无参数的调用 函数单个参数的调用 函数多个参数的调用 # #调试函数给默认参数传新值,则函数使用新值 # 注意:当多种参数同时出现在函数中,默认参数要放在最后的 ...

  5. 持续集成工具之Jenkins pipline简单示例

    前文我们主要聊了下jenkins的插件安装.用户及权限管理.邮件发送.配置凭证到gitlab上拉取项目和创建普通job:回顾请参考https://www.cnblogs.com/qiuhom-1874 ...

  6. c3算法

    # L(G) = [G] + [O] # G = [O] # = GO # L[E] = EO # L[F] = [F] + [GO] # F = [GO] # = FGO # L[B] = [B] ...

  7. day16 Pyhton学习

    1.range(起始位置) range(终止位置) range(起始,终止位置) range(起始,终止,步长) 2.next(迭代器) 是内置函数 __next__是迭代器的方法 g.__next_ ...

  8. CentOS 7的安装与部署 01

    01 虚拟软件的安装与配置 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统.在实体计算机中能够完成的工作在虚拟机中都能够实现. ...

  9. 【源码项目+解析】C语言/C++开发，打造一个小项目扫雷小游戏！

    一直说写个几百行的小项目,于是我写了一个控制台的扫雷,没有想到精简完了代码才200行左右,不过考虑到这是我精简过后的,浓缩才是精华嘛,我就发出来大家一起学习啦,看到程序跑起来能玩,感觉还是蛮有成就感的 ...

  10. 运行shell文件时提示/bin/bash^M: bad interpreter: 没有那个文件

    查看脚本文件是dos格式还是unix格式的几种办法.(1)cat -A filename 从显示结果可以判断,dos格式的文件行尾为^M$,unix格式的文件行尾为$:(2)od -t x1 file ...