使用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实现简单验证码提示解决方案
Dec 20 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
js module大战
Apr 19 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
JS实现滑动插件
2020/01/15 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server