使用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脚本实现Web页面信息交互
Dec 21 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js使用心得分享
Jan 13 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
javascript常用函数(1)
Nov 04 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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
模拟xcopy的函数
2006/10/09 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python模块WSGI使用详解
2018/02/02 Python
Python文件操作方法详解
2020/02/09 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
判断单链表中是否存在环
2012/07/16 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
简短证婚人证婚词
2014/01/09 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
租赁协议书
2015/01/27 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
实习指导老师意见
2015/06/04 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL