javascript小结之浏览器检测

js中的navigator对象包含有关浏览器的信息，目前没有应用于navigator对象的公开标准，但是所有的浏览器都支持该对象。navigator有很多的属性和方法，但是并不是所有的浏览器都支持，可能有些浏览器支持，有些浏览器不支持。有关navigaor对象的内容，可以参加w3school的相应页面（点击这里）。

1、浏览器嗅探器js

下面是一个写好的浏览器嗅探器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"
    }, {
        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();

保存好上面的代码以后，然后在需要的调用的地方，通过引入该文件，然后通过下面的代码即可调用该文件中的方法来检测浏览器信息（备注：发现上面的代码好像有点问题，我不管用IE什么版本的浏览器打开，结果都显示是IE9）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./common.js"></script>
<title>javascript</title>
<script type="text/javascript">
    alert(BrowserDetect.browser); // 浏览器名称
    alert(BrowserDetect.version); // 浏览器版本
    alert(BrowserDetect.OS); // 操作系统
</script>
</head>
<body>
</body>
</html>

2、浏览器插件检测

插件是一类特殊的程序，它可以扩展浏览器的功能，通过下载安装完成。比如，在线音乐，视频动画等等插件。navigator对象的plugins属性，就是存储在浏览器已安装插件的完整列表，这是一个对象集合（数组）。

如下代码所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script type="text/javascript">
    var plugins = window.navigator.plugins;
    var length = plugins.length;
    for ( var i = 0; i < length; i++) {
        document.write("插件名：" + plugins[i].name + "  插件描述："
                + plugins[i].description + "  插件磁盘文件名：" + plugins[i].filename);
        document.write("<br />");
    }
</script>
</head>
<body>
</body>
</html>

浏览器的检测还有很多，都差不多，主要都是用到js的navigator对象（也可以用window对象来调用），同时要注意的是不同浏览器对于有些属性或方法可能支持也可能不支持，JS的代码网上很多，要用的时候可以搜索来学习。

发表评论 取消回复

发表评论取消回复