用jQuery实现检测浏览器及版本的脚本代码


Posted in Javascript onJanuary 22, 2008

如何用 Javascript 检测浏览器似乎是老生常谈的问题。根据本人的经验,使用 Javascript 检测浏览器无非使用两大类的方法。

其一,是使用使用浏览器的功能属性。比如检测浏览器是否支持 getElementById 方法就可以使用

if (document.getElementById) {
    // the method exists, so use it here
} else {
    // do something else
}

虽然这样的检测无法得知用户具体使用哪一种浏览器,不过开发者根据浏览器的功能判断是否兼容自己的代码是经得起考验的。如果关注浏览器的实际功能而不在乎它的实际身份,就可以使用这种方法。

其二,就是使用传统的 user-agent 字符串,这可能是最古老也是最流行的检测方式。虽然从技术角度上说,用户可以更改自己的 user-agent,但是使用它的确能获得一些有用的信息。

话说到此可能有些偏题。使用过 jQuery 的朋友都知道,使用 jQuery 本身的 brower 方法就可以准确的判断用户在使用那种浏览器甚至是版本。好的开发库使用者都想了解其中的一些其实现机制,那么,jQuery 是如何做到这些的?

查看 jQuery 最新的源代码(版本 1.2.2),在第 1195 行至 1205 行,是它的判断浏览器的函数。正如你所看见的,jQuery 使用的是上述第二种方法,即使用 user-agent 判断用户的浏览器和版本。

坦白说,起先我对短短的五行代码就可以判断浏览器的种类和版本感到非常的惊奇。在《Javascript 高级程序设计》一书中,作者甚至使用单独的章节描述的如何使用 Javascript 判断浏览器和操作系统。但通过阅读其代码(其实并不难),我顿时有中恍然大悟的感觉。废话不多说,贴上代码。

var userAgent = navigator.userAgent.toLowerCase();

// Figure out what browser is being used
jQuery.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
    safari: /webkit/.test( userAgent ),
    opera: /opera/.test( userAgent ),
    msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
    mozilla: /mozilla/.test(userAgent)&&!/(compatible|webkit)/.test(userAgent)
};

说到这里,其实有经验的 Javascript 开发人员已经知道了其中的奥秘。是的,jQuery 使用的是正则判断浏览器的种类和版本。做得相当的漂亮!

首先它将 user-agent 统一成小写,然后使用正则逐步的匹配是哪种浏览器。有关正则方面相关的信息,可以参考这里。不过,有人肯定会怀疑这样的判断是否正确。那么我们先来看下下面四个主流浏览器的 user-agent:

Safari(Windows edition)

... AppleWebKit/523.12.9 (KHTML, like Gecko) Version/3.0 Safari/523.12.9

Opera(Opera 9.2 on Windows XP)

Opera/9.24 (Windows NT 5.1; U; zh-cn)

Mozilla(Firefox 2.0.11 on Windows XP)

... Windows NT 5.1; zh-CN; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Internet Explorer (7.0 on Windows XP)

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

jQuery 非常巧妙的使用各浏览器各自不同的 user-agent 特性作为判断。比如 Safari 中 “/webkit/” 是专有的、“/opera/” 也是只有 Opera 浏览器特有等等。这种验证方法可以在目前主流的浏览器上面,基本都可以准确判断。

就在这里打住了,jQuery 的确是非常优秀的 Javascript 开发框架之一。掌握它的确可以为自己的开发添加不少的乐趣。我会陆续将自己阅读 jQuery 框架的心得逐一的发上来,请大家关注。

Javascript 相关文章推荐
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 #Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 #Javascript
jquery 插件 人性化的消息显示
Jan 21 #Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 #Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 #Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 #Javascript
JavaScript表单常用验证集合
Jan 16 #Javascript
You might like
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
Javascript实现的分页函数
2006/12/22 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python爬取三国演义的实现方法
2016/09/12 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
手写一个python迭代器过程详解
2019/08/27 Python
python绘制封闭多边形教程
2020/02/18 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
新领导上任欢迎词
2014/01/13 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
个人自荐书怎么写
2015/03/26 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
python中的装饰器该如何使用
2021/06/18 Python
java版 联机五子棋游戏
2022/05/04 Java/Android
MySQL分布式恢复进阶
2022/07/23 MySQL