使用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定时保存表单数据的代码
Mar 17 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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 cookis创建实现代码
2009/03/16 PHP
php 分页原理详解
2009/08/21 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
JS 时间显示效果代码
2009/08/23 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python 字符串操作方法大全
2014/03/11 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
优秀护士先进事迹
2014/05/08 职场文书
关于安全演讲稿
2014/05/09 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS