JS获取浏览器信息

piaoling  2011-04-27 10:52:42

由于浏览器间的差异及国内浏览器厂商生产的中国特色浏览器和收集用户信息的需要，常常需要获取浏览器的信息，鉴于userAgent的信息比较多， 不直观，所以本文通过一个封装一个JS函数提取浏览器的信息，主要获取的信息是浏览器名称、渲染引擎和版本，函数返回结果是一个json对象，支持回调

1
2
3
4
5
6
{
'Name': 'unknown',
'Engine': 'unknown',
'Version': '0',
'UserAgent': 'unknown'
 }

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/*!
* MI JavaScript Library v1.0
* http://dev.topming.com/
*
* Copyright 2010, hwangzhiming
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Fri Jan 13 2011
*/
var MI = {};
MI.Browser = function () {
    //截取版本号长度
    var VerionLength = 3;
    //AppName常量
    var BrowserAppName = { 'MicrosoftIE': 'Microsoft Internet Explorer', 'Netscape': 'Netscape', 'Opera': 'Opera' };
    //浏览器信息对象
    var BrowserObject = { 'Name': 'unknown', 'Engine': 'unknown', 'Version': '0', 'UserAgent': 'unknown' };
    //UserAgent
    var BrowserUserAgent = {
        'TheWorld': 'TheWorld',
        'QQBrowser': 'QQBrowser',
        'Maxthon': 'Maxthon',
        'SouGou': 'SE',
        'Chrome': 'Chrome',
        'Safari': 'Safari',
        'Firefox': 'Firefox',
        'InternetExplorer': 'MSIE'
    };
    var BrowserVersionTag = {
        'Safari': 'Version',
        'IE': 'MSIE'
    };
 
    //渲染引擎
    var BrowserEngine = { 'Trident': 'Trident', 'WebKit': 'WebKit', 'Gecko': 'Gecko', 'Mozilla': 'Mozilla', 'Presto': 'Presto' };
    //设置参数
    var TraceSetting = { 'debug': false, 'callback': null };
 
    this.Tracer = function (setting) {
        if (setting) { InitSetting(setting); }
        BrowserObject.Name = navigator.appName;
        BrowserObject.Engine = GetEngine();
        BrowserObject.UserAgent = navigator.userAgent;
        switch (BrowserObject.Name) {
            case BrowserAppName.Opera: Opera(); break;
            default: CommonBrowser(); break;
        }
        return BrowserObject;
    }
 
    //非Opera
    function CommonBrowser() {
        var userAgent = navigator.userAgent;
        for (var key in BrowserUserAgent) {
            var position = userAgent.indexOf(BrowserUserAgent[key]);
            if (position > -1) {
                BrowserObject.Name = BrowserUserAgent[key]; //获取浏览器名称
                GetVersion(position); //获取版本
                break;
            }
        }
        EndTrace();
    }
    //Opera
    function Opera() {
        BrowserObject.Version = navigator.appVersion.substr(0, VerionLength);
        EndTrace();
    }
    //=====================================
    //获取版本
    //注：国内浏览器使用IE核心时获取其IE版本
    //=====================================
    function GetVersion(position) {
        var ua = navigator.userAgent;
        if (BrowserObject.Name == BrowserUserAgent.Safari) {//苹果
            BrowserObject.Version = ua.substr(ua.indexOf(BrowserVersionTag.Safari) + BrowserVersionTag.Safari.length + 1, VerionLength);
            return;
        }
        else if (ua.indexOf(BrowserVersionTag.IE) > -1) {//IE
            BrowserObject.Version = ua.substr(ua.indexOf(BrowserVersionTag.IE) + BrowserVersionTag.IE.length + 1, VerionLength);
            return;
        }
        else if (position > -1) {
            position = position + BrowserObject.Name.length + 1;
            BrowserObject.Version = ua.substr(position, VerionLength);
        }
    }
    //核心
    function GetEngine() {
        for (var key in BrowserEngine) {
            var position = navigator.userAgent.indexOf(BrowserEngine[key]);
            if (position > -1) {
                return BrowserEngine[key];
                break;
            }
        }
        return 'unknown';
    }
 
    //初始设置（忽略大小写）
    function InitSetting(s) {
        if (!s) return;
        for (var k in s) {
            TraceSetting[k.toLowerCase()] = s[k];
        }
    }
 
    //结束
    function EndTrace() {
        var params = '';
        for (var key in BrowserObject) {
            params = params + '&' + key.toLowerCase() + '=' + encodeURI(BrowserObject[key]);
        }
        params = params.substring(1);
        //调试信息
        if (TraceSetting.debug) {
            var html = '
<h4 style="color: red;">Browser Information</h4>
 
';
            for (var key in BrowserObject) {
                html = html + '<strong>' + key + '</strong>:' + BrowserObject[key] + '
';
            }
            var debugWin = window.open('', '__DebugInformation', 'height=300,width=500,menubar=no,status=no');
            debugWin.document.body.innerHTML = '
<div style="font-family: Segoe UI;">'
             + html
             + '
'
             + '
<input onclick="javascript:window.close();" value="Close" type="button">'
             + '</div>
 
';
        }
 
        if (TraceSetting.callback) {
            TraceSetting.callback(BrowserObject);
        }
    }
}

调用方法

1
2
3
4
5
6
var t = new MI.Browser();
var setting = {
    'debug': false,//设为true则为调试模式，会弹出窗口显示获取到的对象信息
    'callback': function (browserObject) {/*回调*/}
};
t.Tracer(setting);

 

类别 :  JS（21）  |  浏览（3576）  |  评论(0)
发表评论（评论将通过邮件发给作者）：

Email: