js或jquery 判断浏览器类型

Kinghiee

于 2019-10-15 22:33:05 发布

阅读量668

点赞数

文章标签： JS JQUERY 判断浏览器类型

本文链接：https://blog.csdn.net/qq_42683219/article/details/102576238

版权

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #tip{
            height: 20vw;
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="tip">

</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function() {
        function getBower(){
            var myexplorer = "";
        //判断浏览器的版本
        var explorer = window.navigator.userAgent;
            console.log("<br>"+explorer);
        // document.write("<br>"+explorer);
        //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
        if (explorer.indexOf("QQBrowser") >= 0 || explorer.indexOf("QQ") >= 0) {
            return myexplorer = "腾讯QQ";
        } else if (explorer.indexOf("Safari") >= 0 && explorer.indexOf("MetaSr") >= 0) {
            return myexplorer = "搜狗";
        } else if (!!window.ActiveXObject || "ActiveXObject" in window) {//IE
            if (!window.XMLHttpRequest) {
                return myexplorer = "IE6";
            } else if (window.XMLHttpRequest && !document.documentMode) {
                return myexplorer = "IE7";
            } else if (!-[1,] && document.documentMode && !("msDoNotTrack" in window.navigator)) {
                return myexplorer = "IE8";
            } else {//IE9 10 11
                var hasStrictMode = (function () {
                    "use strict";
                    return this === undefined;
                }());
                if (hasStrictMode) {
                    if (!!window.attachEvent) {
                        return myexplorer = "IE10";
                    } else {
                        console.log(window.attachEvent);
                        return myexplorer = "IE11";
                    }
                } else {
                    return myexplorer = "IE9";
                }
            }
        } else {//非IE
            if (explorer.indexOf("LBBROWSER") >= 0) {
                return myexplorer = "猎豹";
            } else if (explorer.indexOf("360ee") >= 0) {
                return myexplorer = "360极速浏览器";
            } else if (explorer.indexOf("360se") >= 0) {
                return myexplorer = "360安全浏览器";
            } else if (explorer.indexOf("se") >= 0) {
                return myexplorer = "搜狗浏览器";
            } else if (explorer.indexOf("aoyou") >= 0) {
                return myexplorer = "遨游浏览器";
            } else if (explorer.indexOf("qqbrowser") >= 0) {
                return myexplorer = "QQ浏览器";
            } else if (explorer.indexOf("baidu") >= 0) {
                return myexplorer = "百度浏览器";
            } else if (explorer.indexOf("Firefox") >= 0) {
                return myexplorer = "火狐";
            } else if (explorer.indexOf("Maxthon") >= 0) {
                return myexplorer = "遨游";
            } else if (explorer.indexOf("Chrome") >= 0) {
                return myexplorer = "谷歌（或360伪装）";
            } else if (explorer.indexOf("Opera") >= 0) {
                return myexplorer = "欧朋";
            } else if (explorer.indexOf("TheWorld") >= 0) {
                return myexplorer = "世界之窗";
            } else if (explorer.indexOf("Safari") >= 0) {
                return myexplorer = "苹果";
            } else {
                return myexplorer = "其他";
            }
        }
      }
     $("#tip").html("浏览器为："+getBower());
    })
</script>
</body>
</html>

代码来源Happy_EveryDay的博客

原理

原理其实很简单，使用window.navigator.userAgent，获取浏览器用于 HTTP 请求的用户代理头的值。也就是你在浏览器控制台上看到请求文件请求头上user-Agent值（如下图）
在这里插入图片描述
取出值后就是进行匹配。在上面中源代码中使用indexOf函数判断你取的user-Agent中是否有代表浏览器的值（值：例如谷歌是chrome）首先出现的位置,如果有返回出现的位置，没有则返回0.这样就能判断了。需要注意的是IE这个特殊浏览器

这里列出一些常用浏览器user-Agent值

chrome浏览器

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

火狐浏览器

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

win10 Egde

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

ie浏览器（11）

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; Tablet PC 2.0; rv:11.0) like Gecko

360急速模式

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

Kinghiee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫