浏览器检测是在工作中经常用到的,如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了!

但是针对浏览器版本要求比较高的时候,如果只是单纯的判断浏览器的名字的话还不能解决问题,这时候就要通过其他方式来实现!现有的jquery已经废弃了$.browser的使用,所以在这里我介绍一个叫做"浏览器嗅探器"的程序来实现!

代码如下:(BrowserDetect.js)

  1. var BrowserDetect = {
  2. init: function () {
  3. this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  4. this.version = this.searchVersion(navigator.userAgent)
  5. || this.searchVersion(navigator.appVersion)
  6. || "an unknown version";
  7. this.OS = this.searchString(this.dataOS) || "an unknown OS";
  8. },
  9. searchString: function (data) {
  10. for (var i=0;i<data.length;i++) {
  11. var dataString = data[i].string;
  12. var dataProp = data[i].prop;
  13. this.versionSearchString = data[i].versionSearch || data[i].identity;
  14. if (dataString) {
  15. if (dataString.indexOf(data[i].subString) != -1)
  16. return data[i].identity;
  17. }
  18. else if (dataProp)
  19. return data[i].identity;
  20. }
  21. },
  22. searchVersion: function (dataString) {
  23. var index = dataString.indexOf(this.versionSearchString);
  24. if (index == -1) return;
  25. return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  26. },
  27. dataBrowser: [
  28. {
  29. string: navigator.userAgent,
  30. subString: "Chrome",
  31. identity: "Chrome"
  32. },
  33. { string: navigator.userAgent,
  34. subString: "OmniWeb",
  35. versionSearch: "OmniWeb/",
  36. identity: "OmniWeb"
  37. },
  38. {
  39. string: navigator.vendor,
  40. subString: "Apple",
  41. identity: "Safari",
  42. versionSearch: "Version"
  43. },
  44. {
  45. prop: window.opera,
  46. identity: "Opera"
  47. },
  48. {
  49. string: navigator.vendor,
  50. subString: "iCab",
  51. identity: "iCab"
  52. },
  53. {
  54. string: navigator.vendor,
  55. subString: "KDE",
  56. identity: "Konqueror"
  57. },
  58. {
  59. string: navigator.userAgent,
  60. subString: "Firefox",
  61. identity: "Firefox"
  62. },
  63. {
  64. string: navigator.vendor,
  65. subString: "Camino",
  66. identity: "Camino"
  67. },
  68. { // for newer Netscapes (6+)
  69. string: navigator.userAgent,
  70. subString: "Netscape",
  71. identity: "Netscape"
  72. },
  73. {
  74. string: navigator.userAgent,
  75. subString: "MSIE",
  76. identity: "Internet Explorer",
  77. versionSearch: "MSIE"
  78. },
  79. {
  80. string: navigator.userAgent,
  81. subString: "Gecko",
  82. identity: "Mozilla",
  83. versionSearch: "rv"
  84. },
  85. { // for older Netscapes (4-)
  86. string: navigator.userAgent,
  87. subString: "Mozilla",
  88. identity: "Netscape",
  89. versionSearch: "Mozilla"
  90. }
  91. ],
  92. dataOS : [
  93. {
  94. string: navigator.platform,
  95. subString: "Win",
  96. identity: "Windows"
  97. },
  98. {
  99. string: navigator.platform,
  100. subString: "Mac",
  101. identity: "Mac"
  102. },
  103. {
  104. string: navigator.userAgent,
  105. subString: "iPhone",
  106. identity: "iPhone/iPod"
  107. },
  108. {
  109. string: navigator.platform,
  110. subString: "Linux",
  111. identity: "Linux"
  112. }
  113. ]
  114.  
  115. };
  116. BrowserDetect.init();

使用方式如下:

  1. BrowserDetect.browser;// 浏览器的名称,例如Firefox,IE
  2. BrowserDetect.version;//浏览器的版本,比如,7、11
  3. BrowserDetect.OS;//浏览器所宿主的操作系统,比如Windows、Linux

这个js兼容非常不错!使用起来比较简单,而且功能强大!

浏览器检测(BrowserDetect.js)的更多相关文章

  1. 浏览器检测(BrowserDetect.js)使用

    浏览器检测是在工作中经常用到的,如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了! 但是针对浏览器版本要求比较高的时候,如果 ...

  2. 浏览器检测-js

    昨天有一同学问我为什么attachEvent在非IE浏览器下不能起作用,我也跟他解释了一番:attachEvent是IE下独有的,只能在IE下使用,其他浏览器下应该用addEventListener来 ...

  3. 浏览器检测navigator 对象

    1.浏览器及版本号不同的浏览器支持的功能.属性和方法各有不同.比如IE 和Firefox 显示的页面可能就会有所略微不同. alert('浏览器名称:' + navigator.appName); a ...

  4. 第一百一十二节,JavaScript浏览器检测

    JavaScript浏览器检测 学习要点: 1.navigator对象 2.客户端检测 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方 ...

  5. JavaScript(第十七天)【浏览器检测】

    由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能:但在现实中,浏览器之间的差异,以及不同浏 ...

  6. JavaScript浏览器检测之navigator 对象

    一.使用客户端检测的原因 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能: 但在现实中 ...

  7. navigator.userAgent浏览器检测(前端基础系列)

    对于前端来说,浏览器检测已经不陌生了,在做一些页面是,需要针对不同的浏览器进行处理不同的逻辑,最简单的就是区分pc和移动端的浏览器,或是android 和ios下的浏览器. 一.浏览器检测的由来?  ...

  8. 浏览器兼容的JS写法总结

    一.元素查找问题 1. document.all[name]   (1)现有问题:Firefox不支持document.all[name]   (2)解决方法:使用getElementsByName( ...

  9. 编写浏览器和Node.js通用的JavaScript模块

    长期以来JavaScript语言本身不提供模块化的支持, ES6中终于给出了 from, import等关键字来进行模块化的代码组织. 但CommonJS.AMD等规范已经被广为使用,如果希望你的Ja ...

随机推荐

  1. Eclipse 开发WEB项目所遇问题 WebContent WebRoot

    原文:http://blog.sina.com.cn/s/blog_525960510100jo0j.html 最近在做Web 项目时,新建了一个WEB 项目,如webdemo,eclipse默认的b ...

  2. 教你如何选择Android游戏引擎

    我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...

  3. Nginx加多个tomcat实现负载均衡,动静分离

    一:Nginx+Tomcat的动静分离 所谓动静分离就是通过nginx(或apache等)来处理用户端请求的图片.html等静态的文件,tomcat(或weblogic)处理jsp.do等动态文件,从 ...

  4. Nginx+Tomcat集群部署

    为了获取更好的性能,我们常常需要将tomcat进行集群部署.下文通过nginx转发实现tomcat集群,并通过nginx-upstream-jvm-route插件保证session的粘滞. 应用场景环 ...

  5. 字符编码的故事(ASCII,ANSI,Unicode,Utf-8区别)转载

    http://www.imkevinyang.com/2009/02/字符编解码的故事(ascii,ansi,unicode,utf-8区别).html 很久很久以前,有一群人,他们决定用8个可以开合 ...

  6. 版本和API Level对照表

    版本和API Level对照表 Code name Version API level (no code name) 1.0 API level 1 (no code name) 1.1 API le ...

  7. Hibernate初级

    文章来源: http://blog.csdn.net/jiuqiyuliang/article/details/39078749/ 持久化(Persistence),把数据(如内存中的对象)保存到可永 ...

  8. How to use BMW Multi Tool 7.3 to replace lost key for BMW X1

    BMW Multi Tool 7.3 version is a high quality auto key programmer that supports CAS 1, CAS2, CAS3, CA ...

  9. MAC上安装Homebrew、Nginx、PHP、MySQL

    准备工作 新版的 Mac OS 内置了Apache 和 PHP,可以通过以下命令查看Apache和PHP的版本号: # httpd -v # php -v 安装Homebrew Mac下的Homebr ...

  10. mkfs.xfs命令没找到

    yum install xfsprogs xfsdump