使用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不可用的问题探究
Oct 01 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 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 读取文件乱码问题
2010/02/20 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python uuid模块使用实例
2015/04/08 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
详解Django中的form库的使用
2015/07/18 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python时间time模块处理大全
2020/10/25 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
人事主管的岗位职责
2013/11/16 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2019各种保证书范文
2019/06/24 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang