JavaScript跨浏览器版本检测实用代码实例
本文档主要介绍了JavaScript在不同浏览器版本下识别和判断的完整实例代码。随着浏览器技术的发展,JavaScript的兼容性和版本检测变得尤为重要。作者提供了针对多个主流浏览器(包括但不限于IE、Firefox、Chrome、Opera等)的识别方法,确保代码能在各种环境下正常工作。 首先,对于Internet Explorer(IE),从IE5.5及以上版本开始,可以使用`@cc_on`和`_jscript_version`属性来检测。通过`eval`函数计算`@cc_on`和`_jscript_version`之间的差值,可以确定IE的版本。例如: ```javascript var ieVersion = eval("''+/*@cc_on\" + _jscript_version@*/ - 0") * 1; ``` 这个表达式会返回一个数值,表示IE版本号。如果`ieVersion`不为0,则表示是IE,且可以进一步判断是否为IE11以上版本。 其次,针对IE11及以上版本,`addEventListener`方法的存在是一个重要的区分标志,因为`attachEvent`仅存在于IE的早期版本。如代码所示: ```javascript !(window.attachEvent) && !(window.addEventListener) ``` 这段逻辑检查浏览器是否支持`addEventListener`,如果不存在则可能表示是IE11或更高版本。 对于Opera浏览器,通过检测`window.opera`对象是否存在来判断。然而,为了更准确地识别Opera和基于Chromium的浏览器(如Chrome),还需要分析`userAgent`字符串。 对于Chrome浏览器,由于它不使用`attachEvent`,可以通过检查`window.chrome`对象的存在来初步判断。同时,Chrome和Chromium的`userAgent`信息中包含了Chromium/Blink标识符,可以用来进一步确认。 Firefox的识别则依赖于`userAgent`中的特定模式,例如`/(firefox)\/([\w.]+)/`,通过正则表达式匹配来获取Firefox的版本号。 最后,Safari浏览器的识别依赖于`Safari`关键字在`userAgent`中的出现,以及`Version`字段。如果`userAgent`中包含`safari`但没有`Chrome`信息,则可能是Safari。 文章中还提到了Opera的一个特殊情况,即它使用的渲染引擎Presto,这表明了在某些场景下,可能需要特别处理Opera的版本判断。 本文提供了一套全面的JavaScript代码示例,帮助开发者根据浏览器的不同特性来编写兼容性良好的代码,适应各种浏览器环境。通过这些实例,开发者可以更好地了解如何利用浏览器特有的API和`userAgent`信息来进行版本检测,确保网站的兼容性和用户体验。
自昨天发了各浏览器内核介绍的随笔,就闲不住了,想直接写个JS来识别用户所用浏览器版本。
写着写着却发现很多坑爹的地方,比如IE10-的版本是依循常规只支持attachEvent而不支持addEventListener,但到了IE11,却反过来只支持addEventListener而不支持attachEvent。光是这一点就可以判断IE是个大坑,IE11的存在可能会导致之前你写过的代码出现错乱。另如原本可用
var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1
的嗅探脚本来判断是否IE,如果值非0则表示为IE浏览器,但到了IE11,也直接返回0了(即IE11不再识别@cc_on这个IE独有的条件编译语句)。。。。
还有就是上篇文章提到的Opera自从去年就抛弃了自家的Presto内核,转而跟进使用Chrome内核,导致的结果是,新版Opera不再支持window.opera,而且跟随Chrome浏览器支持window.chrome等系列Chrome特性,就连userAgent字样也去了“opera”并直接套用Chromium/Blink内核的userAgent信息(好事是在尾部还是保留了一句OPR/XX.0)
不过琢磨琢磨,问题总会得到解决的。首先解决下比较容易解决的Firefox,其userAgent信息如下:
对比其它浏览器内核的ua信息它独有“Firefox/XX.0”字样,故我们可以这样判断:
rFirefox = /(firefox)\/([\w.]+)/; matchBS = rFirefox.exec(ua);if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) { //codes...}
这里还判断了是否支持window.attachEvent 和 window.chrome、window.opera事件,是为了防止其它非Firefox浏览器的伪装ua信息,但我承认这点很难做到尽善尽美。
接着是Safari,虽然Safari的ua信息含有safari字样,但由于谷歌的浏览器是苹果浏览器内核WebKit的分支,导致Chrome的ua信息也含有safari字样:
这种情况只能“找不同”了,可以看到Safari的ua信息在“Safari/...”之前连着一个“Version/...”,而Chrome的ua信息是没有的,所以可以这样写:
rSafari = /version\/([\w.]+).*(safari)/; matchBS = rSafari.exec(ua);if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) { //....}
接着说Chrome和Opera,这里比较头疼的一点。。。。是Chrome的好基友Opera也开始使用了Chromium或Blink引擎,导致二者ua信息以及对BOM的支持几乎一致(这不废话么,内核都一样了),但还是可以从ua找不同:
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 1
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦