【JS】识别浏览器版本及操作平台

背景：

    有这么个需求，需要统计，用户打开网站使用的浏览器，以及操作平台。

    

实现：

    受HTML5Test这个网站的影响，发现它可以实现，获取浏览器以及平台的功能，然后研究代码发现了这个秘密。

    

    其实就是 这串请求 出来的：http://api.whichbrowser.net/rel/detect.js

    通过调取API 获取一个WhichBrowser 对象，然后其中的browser是浏览器的信息， OS是平台的信息。

    做了个小Demo，可以愉快的访问，来获取版本。效果图如下：

           

使用：

    ① 在head中添加如下代码 

    <script>
        (function () {
            var p = [], w = window, d = document, e = f = 0; p.push('ua=' + encodeURIComponent(navigator.userAgent)); e |= w.ActiveXObject ? 1 : 0; e |= w.opera ? 2 : 0; e |= w.chrome ? 4 : 0;
            e |= 'getBoxObjectFor' in d || 'mozInnerScreenX' in w ? 8 : 0; e |= ('WebKitCSSMatrix' in w || 'WebKitPoint' in w || 'webkitStorageInfo' in w || 'webkitURL' in w) ? 16 : 0;
            e |= (e & 16 && ({}.toString).toString().indexOf("
") === -1) ? 32 : 0; p.push('e=' + e); f |= 'sandbox' in d.createElement('iframe') ? 1 : 0; f |= 'WebSocket' in w ? 2 : 0;
            f |= w.Worker ? 4 : 0; f |= w.applicationCache ? 8 : 0; f |= w.history && history.pushState ? 16 : 0; f |= d.documentElement.webkitRequestFullScreen ? 32 : 0; f |= 'FileReader' in w ? 64 : 0;
            p.push('f=' + f); p.push('r=' + Math.random().toString(36).substring(7)); p.push('w=' + screen.width); p.push('h=' + screen.height); var s = d.createElement('script');
            s.src = '//api.whichbrowser.net/rel/detect.js?' + p.join('&'); d.getElementsByTagName('head')[0].appendChild(s);
        })();
    </script>

    ②  具体实现为

 <script>
        function waitForWhichBrowser(cb) {
            var callback = cb;
            function wait() {
                if (typeof WhichBrowser == 'undefined')
                    window.setTimeout(wait, 100);
                else
                    callback();
            }
            wait();
        }
        waitForWhichBrowser(function () {
            var Browsers = new WhichBrowser({
                useFeatures: true,
                detectCamouflage: true
            });
            alert(Browsers.browser + "  ");
            alert(Browsers.os + "  ");
        });
    </script>

下载：

        点击我下载Demo

    

来自为知笔记(Wiz)

附件列表