使用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弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
node.js入门学习之url模块
Feb 25 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
党员干部公开承诺书
2014/03/26 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL