使用js检测浏览器的实现代码


Posted in Javascript onMay 14, 2013

在写跨浏览器的js程序中,检测浏览器是一个很重要的工作。我们不时要为不同的浏览器写分支代码。
如下是一种:

//添加事件工具函数
function addEvent(el,type,handle){
    if(el.addEventListener){//for standard browses
        el.addEventListener(type,handle,false);
    }else if(el.attachEvent){//for IE
        el.attachEvent("on"+event,handle);
    }else{//other
        el["on"+type]=handle;
    }
}

1,第一种检测浏览器方式称为 user-agent 检测方式。是最古老的,它检测目标浏览器的确切型号,包括浏览器的名称和版本。其实就是一个字符串,用navigator.userAgen或navigator.appName获取。如下:
function isIE(){
    return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
}
function isIE6() {
    return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
}
function isIE7(){
    return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 7.0")=="-1"?false:true;
}
function isIE8(){
    return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 8.0")=="-1"?false:true;
}
function isNN(){
    return navigator.userAgent.indexOf("Netscape")!=-1;
}
function isOpera(){
    return navigator.appName.indexOf("Opera")!=-1;
}
function isFF(){
    return navigator.userAgent.indexOf("Firefox")!=-1;
}
function isChrome(){
    return navigator.userAgent.indexOf("Chrome") > -1;  
}

2,第二种称为 对象/特征 检测方式,这是一种判断浏览器能力的方式,也是目前流行的方式。即在使用一个对象之前检测它是否存在。上面提到的addEvent方法中就使用了该方式。.addEventListener是w3c dom标准方式,而IE使用自己特有attachEvent。以下列举几个:

a,talbe.cells只有IE/Opera支持。

b,innerText/insertAdjacentHTML除Firefox外,IE6/7/8/Safari/Chrome/Opera都支持。

c,window.external.AddFavorite用来在IE下添加到收藏夹。

d,window.sidebar.addPanel用来在FF下添加到收藏夹。

3,第三种很有趣,暂且称为 浏览器缺陷或bug 方式,即某些表现不是浏览器厂商刻意实现的。如下:

var isIE = !+"\v1";
var isIE = !-[1,];
var isIE = "\v"=="v";
isSafari=/a/.__proto__=='//';
isOpera=!!window.opera;

最经典的莫过于 !-[1,] 的判断方式,目前最少代码判断IE的方式,只需6个byte。这是个俄国人 发现的。利用了数组[1,]的length。还有来自英国的年轻 James Padolsey 利用IE条件注释
var ie = (function(){
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    ); 
    return v > 4 ? v : undef
}());

被称为史上最有创意的IE判断。

注1:isIE = "\v" == "v" 方式IE9已经修复该bug,不能用此方式判断IE浏览器了(2010-6-29用IE9 pre3测试的)

Javascript 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
js实现微信分享代码
Oct 11 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Javascript 垃圾收集机制介绍理解
May 14 #Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 #Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 #Javascript
js 程序执行与顺序实现详解
May 13 #Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 #Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 #Javascript
jQuery实现长文字部分显示代码
May 13 #Javascript
You might like
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
php7性能提升的原因详解
2019/10/13 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
js表格分页实现代码
2009/09/18 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
pandas中的series数据类型详解
2019/07/06 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
迎接领导欢迎词
2014/01/11 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
python中__slots__节约内存的具体做法
2021/07/04 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技