JavaScript浏览器检测之navigator 对象

时间 2019-11-09

标签 javascript 浏览器检测 navigator 对象栏目 JavaScript 繁體版

原文原文链接

1、使用客户端检测的缘由javascript

　　因为每一个浏览器都具备本身独到的扩展，因此在开发阶段来判断浏览器是一个很是重要的步骤。java

　　虽然浏览器开发商在公共接口方面投入了不少精力，努力的去支持最经常使用的公共功能；数组

　　但在现实中，浏览器之间的差别，以及不一样浏览器的“怪癖”倒是很是多的，所以客户端检测除了是一种补救措施，更是一种行之有效的开发策略。

浏览器

2、navigator 对象概述app

　　navigator 对象最先由 Netscape Navigator2.0 引入的 navigator 对象，如今已经成为识别客户端浏览器的事实标准。ide

　　与以前的 BOM 对象同样，每一个浏览器中的 navigator 对象也都有一套本身的属性。动画

alert(window.navigator);//navigator对象是window对象下的

　　一、浏览器及版本号:this

　　　　不一样的浏览器支持的功能、属性和方法各有不一样。好比 IE 和 Firefox 显示的页面可能就会有所略微不一样。spa

alert('浏览器名称：' + navigator.appName);//浏览器名称：Netscape     这个属性不能精确的取到浏览器的名称

alert('浏览器用户代理字符串：' + navigator.userAgent);//表示的是浏览器信息的东西   浏览器用户代理字符串：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

alert('浏览器所在的系统：' + navigator.platform);//只是单纯的检测出是什么平台，检测不出win7仍是winxp等等

alert('浏览器版本：' + navigator.appVersion);

　　二、浏览器嗅探器操作系统

　　　　浏览器嗅探器是一段程序，有了它，浏览器检测就变得简单了。

　　　　咱们这里提供了一个browserdetect.js 文件，用于判断浏览器的名称、版本号及操做系统。

　　　　browserdetect.js ：（浏览器探测器——浏览器名称，浏览器版本，浏览器所在的操做系统）

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Internet Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

<script type="text/javascript" src="browserdetect.js"></script>
<script type="text/javascript">
    alert(BrowserDetect.browser);
    alert(BrowserDetect.version);
    alert(BrowserDetect.OS);
    //给IE7如下的浏览器作特殊处理
    if(BrowserDetect.browser=='Interent Explorer' && BrowserDelect.version < 7){
        alert("须要作IE低版本的兼容");
    }
</script>

　　三、检测插件

　　　　IE浏览器不能用，由于IE浏览器没有插件
　　　　插件是一类特殊的程序。他能够扩展浏览器的功能，经过下载安装完成。

　　　　好比，在线音乐、视频动画等等插件。navigator 对象的 plugins 属性，这是一个数组。存储在浏览器已安装插件的完整列表。
　　　　

    //列出全部的插件名
    for (var i = 0; i < navigator.plugins.length; i ++) {
        document.write(navigator.plugins[i].name + '<br />');
        document.write(navigator.plugins[i].filename + '<br />');
        document.write(navigator.plugins[i].description + '<br />');
        document.write('<br />');
    }

　　　　定义一个功能用于判断某插件是否存在（非IE浏览器插件）

    function hasPlugin(name) {
        var name = name.toLowerCase();
        for (var i = 0; i < navigator.plugins.length; i ++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }
    alert(hasPlugin('Flash')); //检测 Flash 是否存在
    alert(hasPlugin('java')) //检测 Java 是否存在

　　四、ActiveX:

　　　　IE 浏览器没有插件，但提供了 ActiveX 控件。

　　　　ActiveX 控件一种在 Web 页面中嵌入对象或组件的方法。

　　　　因为在 JS 中，咱们没法把全部已安装的 ActiveX 控件遍历出来，但咱们仍是能够去验证是否安装了此控件。

    //检测 IE 中的控件
    function hasIEPlugin(name) {
        try {
            new ActiveXObject(name);//这里的name必须是控件的惟一标识符id（每一个控件都有它的惟一标识符）
            return true;
        } catch (e) {
            return false;
        }
    }
    //检测 Flash（传入的是Flash控件的标识符）
    alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));

　　　　ShockwaveFlash.ShockwaveFlash 是 IE 中表明 FLASH 的标识符，你须要检查哪一种控件，必须先获取它的标识符。

　　五、跨浏览器检测是否支持 Flash

    //检测非IE的
    function hasPlugin(name) {
        var name = name.toLowerCase();
        for (var i = 0; i < navigator.plugins.length; i ++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }

    //检测 IE 中的控件
    function hasIEPlugin(name) {
        try {
            new ActiveXObject(name);//这里的name必须是控件的惟一标识符id（每一个控件都有它的惟一标识符）
            return true;
        } catch (e) {
            return false;
        }
    }
    
    //跨浏览器
    function hasFlash() {
        var result = hasPlugin('Flash');  //若是返回true，说明检测到了，而且不是IE浏览器，若是没有检测到 说明这个浏览器没有Flash插件，或者他多是IE浏览器
        if (!result) {
            result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
        }
        return result;
    }
    //检测 Flash
    alert(hasFlash());

　　六、MIME 类型
　　　　MIME 是指多用途因特网邮件扩展。它是经过因特网发送邮件消息的标准格式。

　　　　如今也被用于在因特网中交换各类类型的文件。PS：mimeType[]数组在 IE 中不产生输出。
　　　　

    //遍历非 IE 下全部 MIME 类型信息
    for (var i = 0; i < navigator.mimeTypes.length; i++) {
        if (navigator.mimeTypes[i].enabledPlugin != null) {document.write('<dl>');
            document.write('<dd>类型名称：' + navigator.mimeTypes[i].type + '</dd>');
            document.write('<dd>类型引用：' + navigator.mimeTypes[i].enabledPlugin.name +'</dd>');
            document.write('<dd>类型描述：' + navigator.mimeTypes[i].description + '</dd>');
            document.write('<dd>类型后缀：' + navigator.mimeTypes[i].suffixes + '</dd>');
            document.write('</dl>')
        }
    }