使用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 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue实现一拉到底的滑动验证
Jul 25 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
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP反射API示例分享
2016/10/08 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
Python实现线程池代码分享
2015/06/21 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
培训科主任岗位职责
2014/08/08 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
通知格式
2015/04/27 职场文书
少年雷锋观后感
2015/06/10 职场文书
python如何正确使用yield
2021/05/21 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL