jQuery.browser的实现方式
jQuery中的browser对象
jQuery中的browser对象保存了浏览器的信息。跨浏览器是大多数客户端JS库必须具备的基本特性,判断浏览的类型和版本号并保存在对象中,就是为了针对不同浏览器采取不同的策略。
下面的代码用于展示jQuery.browser的用法:
<script type="text/javascript" src="jquery.js"></script>
<script>
document.write('$.browser.webkit: ' + $.browser.webkit + '<br />');
document.write('$.browser.opera: ' + $.browser.opera + '<br />');
document.write('$.browser.msie: ' + $.browser.msie + '<br />');
document.write('$.browser.mozilla: ' + $.browser.mozilla + '<br />');
document.write('$.browser.version: ' + $.browser.version);
</script>
这段代码在不同浏览器中的显示效果是不同的。
IE中的显示效果如下:
$.browser.webkit: undefined
$.browser.opera: undefined
$.browser.msie: true
$.browser.mozilla: undefined
$.browser.version: 8.0
根据 $.browser.msie 是否为true,就可以判断浏览器是否为 IE 内核了。而通过$.browser.version可以获得浏览器内核的版本号。其他浏览器可以采用类似的方式进行判断。
实现思路
jQuery.browser的实现思路如下:
1. 通过 window.navigator.userAgent 获取浏览器的描述字符串
2. 使用正则表达式进行匹配,不同浏览器内核对应正则表达式是不同的
3. 根据匹配的结果,判断是否为特定浏览器,并提取版本号
4. 将结果保存到browser对象中。
首先,让我们测试一下不同浏览器的 window.navigator.userAgent 的输出结果:
ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua);
Google Chrome 的显示结果:
user agent:
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.60 Safari/534.24
我们知道Cheomr的浏览器内核是Webkit,因此其中最重要的是WebKit关键字,但Google Chrome为了显示其兼容性,也在描述字符串中包含了Mozilla等字样。其他浏览器也有类似的情况。
Apple Safari 的显示结果:
user agent:
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Microsoft IE 8.0 的显示结果:
user agent:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)
Mozilla FireFox的显示结果:
user agent:
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3
Opera的显示结果:
user agent:
Opera/9.80 (Windows NT 6.1; U; Edition IBIS; zh-cn) Presto/2.8.131 Version/11.10
因为不同浏览器采用的正则表达式是不同的,下面,我们就针对不同的浏览器的情况,对jQuery.browser的实现进行进一步的分析。
Webkit 内核的检测
Google Chrome 和 Apple Safari 使用的都是 Webkit 内核,其描述字符串中也都包含了"Webkit",因此用于检测的正则表达式中需要包含"Webkit"。
另外,版本号是紧跟着"Webkit"关键字的,中间用"/"分隔。因此,我们可以用下面的代码判断浏览器是否为Webkit内核,并提取版本号:
ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');
match = /WebKit\/([\w.]+)/.exec(ua);
if (match) {
document.write('Webkit Kernal<br />');
document.write('Version: ' + match[1]);
} else {
document.write('Not Webkit Kernal');
}
使用的正则表达式是 /WebKit\/([\w.]+)/, 表示包含"Webkit"及分隔符"/",并且捕捉"/"之后的字符,直到空格为止,作为版本号。(\w匹配字母或数字或下划线或汉字等。)
IE 内核的检测
IE 内核浏览器的描述字符串中包含了"MSIE",版本号紧跟着"MSIE"关键字,中间用空格分隔。因此,我们可以用下面的代码判断浏览器是否为IE内核,并提取版本号:
ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');
match = /MSIE ([\w.]+)/.exec(ua);
if (match) {
document.write('IE Kernal<br />');
document.write('Version: ' + match[1]);
} else {
document.write('Not IE Kernal');
}
使用的正则表达式是 /MSIE ([\w.]+)/, 表示包含"MSIE"及空格,并且捕捉空格之后的字符,直到下一个空格为止,作为版本号。
Mozilla 内核的检测
Mozilla Firefox 描述字符串中包含了"Mozilla",版本号出现在在"rv:"之后(Mozilla关键字之后也有版本号,但rv之后的版本号更细化一些)。因此,我们可以用下面的代码判断浏览器是否为Mozilla内核,并提取版本号:
ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');
match = /Mozilla(?:.*? rv:([\w.]+))/.exec(ua);
if (match) {
document.write('Mozilla Kernal<br />');
document.write('Version: ' + match[1]);
} else {
document.write('Not Mozilla Kernal');
}
使用的正则表达式是 /Mozilla(?:.*? rv:([\w.]+))/, 表示包含"Mozilla",并且捕捉"rv:"之后的字符,直到下一个空格为止,作为版本号。
Opera 内核的检测
Opera 描述字符串中包含了"Opera",版本号出现在在"Version/"之后(同样,Opera关键字之后也有版本号,但"Version"之后的版本号更细化一些)。因此,我们可以用下面的代码判断浏览器是否为Opera内核,并提取版本号:
ua = window.navigator.userAgent;
document.write('user agent:<br />' + ua + '<br /><br />');
match = /Opera(?:.*Version)\/([\w.]+)/.exec(ua);
if (match) {
document.write('Opera Kernal<br />');
document.write('Version: ' + match[1]);
} else {
document.write('Not Opera Kernal');
}
使用的正则表达式是 /Opera(?:.*Version)\/([\w.]+)/, 表示包含"Opera",并且捕捉"Version/"之后的字符,直到下一个空格为止,作为版本号。
合并
将以上针对不同浏览器的代码串联起来,就可以实现jQuery.browser了。但jQuery中的实现更具有技巧性一些。下面是与jQuery中的实现比较接近的写法:
$ = function() {
function uaMatch(ua) {
ua = ua.toLowerCase();
var match = rwebkit.exec(ua)
|| ropera.exec(ua)
|| rmsie.exec(ua)
|| ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
|| [];
return {
browser : match[1] || "",
version : match[2] || "0"
};
}
var
rwebkit = /(webkit)\/([\w.]+)/,
ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
rmsie = /(msie) ([\w.]+)/,
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
browser = {},
ua = window.navigator.userAgent,
browserMatch = uaMatch(ua);
if (browserMatch.browser) {
browser[browserMatch.browser] = true;
browser.version = browserMatch.version;
}
return { browser: browser }
}();
将这个 JS 文件命名为 "jquery-browser.js",并在html中引用它:
<script type="text/javascript" src="jquery-browser.js"></script>
<script>
document.write('$.browser.webkit: ' + $.browser.webkit + '<br />');
document.write('$.browser.opera: ' + $.browser.opera + '<br />');
document.write('$.browser.msie: ' + $.browser.msie + '<br />');
document.write('$.browser.mozilla: ' + $.browser.mozilla + '<br />');
document.write('$.browser.version: ' + $.browser.version + '<br />');
</script>
效果与直接引用jquery.js是相同的。
让我们注意几个不同之处:
1. userAgent被转为小写字母进行匹配,避免了大小写的影响;
2. 判断 Mozilla 时增加了 ua.indexOf("compatible") < 0,这是为了排除一些声称兼容Mozilla的浏览器的影响(比如 IE 8.0),一些搜索引擎的爬虫也经常声称兼容Mozilla;
3. 检测Opera 和 Mozilla 的正则表达式用"?"标明 "rv" 或 "Version" 是可有可无的,这可能是为了兼容不同的 Opera 和 Mozilla 内核浏览器(或较老的版本);
4.match 捕捉的组有两个,第一个是浏览器内核名称,第二个是版本号,实现同时提取浏览器内核名称和版本号,减少了代码量。
以上就是jQuery.briwser的相对完整的实现了。主要的技巧是使用 window.navigator.userAgent 获取浏览器的描述字符串,以及通过正则表达式从该字符中提取信息。
分享到:
相关推荐
js使用i18n实现页面国际化 var webLanguage = ['zh-CN', 'en']; //获取网站语言 function getWebLanguage(){ //1.cookie是否存在 if (jQuery.cookie("userLanguage")) { i18nLanguage = jQuery.cookie(...
`browser.html`可能是用来展示jQuery.nicescroll在不同浏览器上的兼容性和表现情况。由于不同的浏览器对CSS和JavaScript的支持程度不同,这个文件可能包含了多组测试用例,确保在主流浏览器(如Chrome、Firefox、...
jQuery库还包括对浏览器特性的检测,如`jQuery.browser`,它提供了对不同浏览器版本的信息,以便进行特定浏览器的兼容性处理。此外,`jQuery.macros`则是一系列预定义的宏,常用于初始化过程中,如过滤、属性操作等...
《jQuery判断浏览器版本插件——jquery-browser.js》 在网页开发中,了解用户正在使用的浏览器类型及版本至关重要,因为不同的浏览器可能对某些JavaScript特性的支持程度不同,这直接影响到网页的兼容性和用户体验...
- 考虑到不同浏览器的差异,可能需要使用jQuery的跨浏览器功能,如`$.browser`来优化代码的执行效果。 - 为了确保在移动设备上也能正常工作,可能需要适配触摸事件,如`touchstart`、`touchmove`和`touchend`。 ...
5. **JavaScript 和 CSS3 支持**:为了实现自适应功能,开发者常利用JavaScript库(如jQuery Mobile或React.js)和CSS3的新特性,如Flexbox或Grid布局,来创建动态和灵活的用户界面。 6. **设备特性检测**:为了更...
在jQuery的早期版本中,开发者通常使用`$.browser`对象来检测用户使用的浏览器类型和版本,以便针对不同浏览器实现特定的兼容性代码。然而,这种做法并不被推荐,因为它鼓励了浏览器嗅探(browser sniffing),而...
总结,jQuery.nicescroll插件是实现网页滚动条美化和增强交互体验的强大工具。通过灵活的配置和丰富的API,开发者可以轻松地将它整合到自己的项目中,为用户提供更加愉悦的浏览体验。无论是新手还是经验丰富的开发者...
首先,我们来解析这个系统的名称——"jquery.sfbrowser",其中“sf”可能代表“Simple File”,而“browser”则暗示这是一款文件浏览工具。这个系统的核心在于利用了强大的JavaScript库jQuery,结合服务器端的PHP...
总结来说,`$.browser`是jQuery早期对浏览器识别的一种实现,通过解析`navigator.userAgent`,我们可以得知浏览器的类型和版本。虽然现在已被弃用,但其背后的检测逻辑对于理解浏览器的差异性和前端兼容性问题仍然...
jQuery validate.js插件是实现这一功能的强大工具,它提供了丰富的验证规则和自定义选项,使得表单验证变得简单易行。 首先,了解jQuery validate.js的基本使用。该插件由Bassistance.de开发,其官方网站为...
在`jquery.jBox-2.3.js`中,jBox很可能已经引入了对滚动条的处理逻辑,比如通过获取`window.pageYOffset`和`window.innerWidth`等属性来准确获取页面的滚动位置和可视区域大小,从而实现弹出框的精确定位。...
通过基于grunt的新构建系统,你可以轻松实现该功能。可以移除的模块包括ajax、css、dimensions、effects和offset。更多信息可参阅README file。 2. 根据浏览器为CSS属性加前缀 某些CSS属性前带有供应商前缀,...
在"jquery.sfbrowser"这个项目中,"sfbrowser"可能代表"Simple File Browser",即一个简单的文件浏览器组件,它可能允许用户浏览、上传和下载文件。这个系统利用jQuery的强大功能处理用户界面交互,同时后端由PHP...
对于那些仍需支持老版本IE的应用,可以通过条件注释或使用不同的jQuery版本来实现兼容。例如,在HTML中使用条件注释加载不同版本的jQuery库: ```html <!--[if lt IE 9]> <script src="http://keleyi....
1. **命名空间**: jQuery 3.x中移除了$.browser属性,因为它依赖于已经废弃的UserAgent字符串解析。如果代码中使用了这一属性,需要找到替代方案或者使用migrate插件来恢复。 2. **事件绑定**: 在1.x版本中,$.live...
总结来说,虽然jQuery不再直接提供浏览器检测功能,但开发者依然可以通过UserAgent字符串和其他第三方库来实现这一目的。不过,应该注意的是,浏览器检测不应作为解决兼容性问题的首选方案,优先考虑使用符合标准的...
3. 动画效果:$.fn.animate()是jQuery中强大的动画工具,可用于实现平滑的CSS属性变化。配合$.fn.delay()和$.fn.queue(),可以创建复杂的动画序列。 4. AJAX请求:$.ajax()函数是jQuery的核心之一,它封装了...
jQuery SFBrowser,根据其名称,可能是“Simple File Browser”的缩写,它提供了一个用户界面,让用户能够方便地浏览和选择要上传或下载的文件。这种组件通常包括文件选择、预览、多文件选择和进度显示等功能,使用...
jQuery库曾提供了一种简便的方式,通过$.browser对象来实现这一目的,然而随着浏览器市场的变化和技术的发展,jQuery的这一方法也经历了变迁。 $.browser对象是jQuery的工具类,它能够通过检查userAgent字符串来...