背景:

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

    

实现:
    受HTML5Test这个网站的影响,发现它可以实现,获取浏览器以及平台的功能,然后研究代码发现了这个秘密。
    
    其实就是 这串请求 出来的:http://api.whichbrowser.net/rel/detect.js
    通过调取API 获取一个WhichBrowser 对象,然后其中的browser是浏览器的信息, OS是平台的信息。
    做了个小Demo,可以愉快的访问,来获取版本。效果图如下:
           
使用:
    ① 在head中添加如下代码 
  1. <script>
  2. (function () {
  3. 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;
  4. e |= 'getBoxObjectFor' in d || 'mozInnerScreenX' in w ? 8 : 0; e |= ('WebKitCSSMatrix' in w || 'WebKitPoint' in w || 'webkitStorageInfo' in w || 'webkitURL' in w) ? 16 : 0;
  5. e |= (e & 16 && ({}.toString).toString().indexOf("\n") === -1) ? 32 : 0; p.push('e=' + e); f |= 'sandbox' in d.createElement('iframe') ? 1 : 0; f |= 'WebSocket' in w ? 2 : 0;
  6. 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;
  7. 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');
  8. s.src = '//api.whichbrowser.net/rel/detect.js?' + p.join('&'); d.getElementsByTagName('head')[0].appendChild(s);
  9. })();
  10. </script>
    ②  具体实现为
  1. <script>
  2. function waitForWhichBrowser(cb) {
  3. var callback = cb;
  4. function wait() {
  5. if (typeof WhichBrowser == 'undefined')
  6. window.setTimeout(wait, 100);
  7. else
  8. callback();
  9. }
  10. wait();
  11. }
  12. waitForWhichBrowser(function () {
  13. var Browsers = new WhichBrowser({
  14. useFeatures: true,
  15. detectCamouflage: true
  16. });
  17. alert(Browsers.browser + " ");
  18. alert(Browsers.os + " ");
  19. });
  20. </script>


下载:
        点击我下载Demo

    

附件列表

【JS】识别浏览器版本及操作平台的更多相关文章

  1. 用JS识别各版本浏览器

    自昨天发了各浏览器内核介绍的随笔,就闲不住了,想直接写个JS来识别用户所用浏览器版本. 写着写着却发现很多坑爹的地方,比如IE10-的版本是依循常规支持attachEvent,但到了IE11,却只支持 ...

  2. [js]识别浏览器及版本

    var userAgent = navigator.userAgent.toLowerCase();window.jQuery.browser = {    version: (userAgent.m ...

  3. [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器

    截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...

  4. js获取浏览器版本信息整理

    一.Navigator 对象 JavaScript Navigator 对象包含了有关访问者浏览器的所有信息.接下来我们学习 Navigator 对象的两个属性. appName 保存浏览器类型 ap ...

  5. 关于通过JS识别浏览器类型的方法

    JS检测浏览器类型的方法   网络上一般采用navigator.userAgent判断浏览器标识的办法,但是有个麻烦的问题是IE11不断升级之后,IE11的userAgent变成: "Moz ...

  6. JS判断浏览器版本

    CSS html,body{ height: 100%; } body{ margin: 0 } div{ padding-left: 50px; } .span{ padding: 5px 15px ...

  7. JS检测浏览器版本信息(包含IE11),并动态添加样式

    <head runat="server"> <meta http-equiv="Content-Type" content="tex ...

  8. js获取浏览器版本

    获取火狐,谷歌,ie,常见浏览器的方法 function myBrowser(){ var userAgent = navigator.userAgent, rMsie = /(msie\s|trid ...

  9. 利用JS判断浏览器版本

    function checkBrowser() { var browserName = navigator.userAgent.toLowerCase(); //var ua = navigator. ...

随机推荐

  1. A woman without arms

    任吉美出生在中国烟台海阳一个极为普通的渔民家里.她先天残疾,没有胳膊和手. 小吉美注定要比别人生活得更艰难.她不能自己穿衣,不能自己端碗吃饭,也不能像兄弟姐妹们一样帮助妈妈干家务活,她觉得自己成了家里 ...

  2. hdu 5253 最小生成树

    赤裸裸最小生成树,没啥说的,我用kruskal过的 /* * Author : ben */ #include <cstdio> #include <cstdlib> #inc ...

  3. php动态生成一个xml文件供swf调用

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdo ...

  4. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  5. linq数据使用

    取出数据库满足条件的记录的ID,把值放到list中 ) { int userid = Convert.ToInt32(Request.Cookies["id"].Value); v ...

  6. bzoj2940: [Poi2000]条纹

    2940: [Poi2000]条纹 条纹游戏是一个双人的游戏.所需要的物品有一个棋盘以及三种颜色的长方形条纹,这三种颜色分别是红色.绿色和蓝色.所有的红色条纹的尺寸是c*1,所有的绿色条纹的尺寸是z* ...

  7. HDU ACM 1050 Moving Tables

    Problem Description The famous ACM (Advanced Computer Maker) Company has rented a floor of a buildin ...

  8. js_sl 延迟菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. openstack 实例迁移

  10. javascript面向对象事件继承

    继承:父类有的,子类也有.父类改变,子类也跟着变. 属性继承:      矫正this (window对象,矫正成object对象)     fn .call(this是谁,参数1,参数2...); ...