使用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_ibm
May 16 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
taro开发微信小程序的实践
May 21 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP递归算法的简单实例
2019/02/28 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
车工岗位职责
2013/11/26 职场文书
2014年征兵标语
2014/06/20 职场文书
元旦晚会活动总结
2014/07/09 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
LeetCode189轮转数组python示例
2022/08/05 Python