使用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 相关文章推荐
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
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
一个查看session内容的函数
2006/10/09 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
门面房租房协议书
2014/12/01 职场文书
求职自我推荐信
2015/03/24 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
高中体育课教学反思
2016/02/16 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
python数字转对应中文的方法总结
2021/08/02 Python
在Docker容器中部署SQL Server
2022/04/11 Servers