使用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代码优化 遍历篇
Nov 01 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
TS 类型收窄教程示例详解
Sep 23 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中PDO基础教程 入门级
2011/09/04 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php的hash算法介绍
2014/02/13 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
轮播图组件js代码
2016/08/08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
语文课外活动总结
2014/08/27 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年财务部工作总结
2015/04/10 职场文书
导游词之唐山景点
2019/12/18 职场文书
Python django中如何使用restful框架
2021/06/23 Python
python实现会员管理系统
2022/03/18 Python
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
MySQL池化框架学习接池自定义
2022/07/23 MySQL