使用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 ajax同步异步的执行最终解决方案
Apr 26 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
js实现适配不同的屏幕大小
Apr 10 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 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
模拟flock实现文件锁定
2007/02/14 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
[JS]点出统计器
2020/10/11 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
JS常见算法详解
2017/02/28 Javascript
axios基本入门用法教程
2017/03/25 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python通过http下载文件的方法详解
2019/07/26 Python
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
光学与应用专业毕业生求职信
2014/09/01 职场文书
捐款感谢信
2015/01/20 职场文书