用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 相关文章推荐
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JScript中的条件注释详解
Apr 24 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
零基础学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
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php 面向对象的一个例子
2011/04/12 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python正则表达式及使用正则表达式的例子
2018/01/22 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Python列表的切片实例讲解
2019/08/20 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
升国旗仪式主持词
2014/03/19 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
战略合作意向书
2014/07/29 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2015年团队工作总结范文
2015/05/04 职场文书