不要使用浏览器嗅探,尽量使用特性检测和特性模拟
时间:2022-05-04
本文章向大家介绍不要使用浏览器嗅探,尽量使用特性检测和特性模拟,主要内容包括平淡的描述、示范1、示范2、言论、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
平淡的描述
在js中,能使用特征监测就尽量不要使用浏览器嗅探。嗅探浏览器目的是判断可否使用这个对象或者API,但是抛开浏览器
的各个版本的userAgent不说,还有些浏览器打补丁的情况,造成判断异常复杂,兜了个大的圈子,而特征检测则是直接
了当,不存在维护困难的问题。
其次,当不确定某个版本的浏览器是否有特殊的bug时(如IE8下js访问css的float属性时,是styleFloat,
而在w3c浏览器下是CssFloat;IE8下getElementByTagNames返回NodeList包括注释节点),仅仅使用特征检测却是不够的。
这是就需要特性模拟。特性模拟最经典的例子就是jQuery的support模块,我们可以参考该模块来充分认识各个浏览器下的独特
的bug。
示范1
利用特征监测来推测IE的的版本号非常好用,也可利用IE的一些特有对象来识别IE所有系列。
'VBArray' in window // true
'ActiveXObject' in window //true
if(isIE){
if(document.documentMode == 11){
isIE11 = true;
}else if('WebSocket' in window){
isIE10 = true;
}else if('HTMLElement' in window){
isIE9 = true;
}else if('localStorage' in window){
isIE8 = true;
} else if('minHeight' in div.currentStyle){
isIE7 = true;
} else{
isIE6 = true;
document.execCommad('backgroundimagecache',false,false); //IE6并不会对背景图片进行缓存,故进行修补
}
}
对于ff:
经最新版本测试
'netscape' in window // true
示范2
利用特性模拟来判断浏览器的getElementByTagNames返回的NodeList对象是否包含注释节点:
(function(){
var hasCommentNode = false,d;
d = document.createElement("div");
d.appendChild(document.createComment("test"));
if(d.getElementByTagNames("*").length != 0)
hasCommentNode = true;
window.hasCommentNode = hasCommentNode ;
d.outerHTML = "";
})()
模拟的结果保存在全局变量上,以供后面的代码使用。
更为详细的特征模拟可以参考jQuery的support模块。其主要模拟了
- NodeList对象在旧版IE(IE678)下使用数组方法slice会出错;
- CssStyleDeclaration的float的属性名问题;
- IE下的滤镜问题(针对透明度而言);
- 旧版IE下setAttribute("className")问题;
言论
可见,没必要再对userAgent耿耿于怀,字符串可以随意伪造,但是浏览器的相关特性却是不会改变,所以我们
还是宁愿花几毫秒来测试一番,而不用提心吊胆的根据字符串随意猜测相关特性。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法