JavaScript 客户端检测——“能力检测”的注意要点

Pluser 发布于2019-08-19 17:09 / 981人阅读

摘要：能力检测性能检测基本模式语法目标不是识别特定的浏览器，而是识别浏览器的能力。更可靠的能力检测能力检测对于想知道某个特性是否会按照适当方式行事非常有用。所以在可能的情况下，要尽量使用进行能力检测。

客户端检测

不到万不得已，就不要使用客户端检测。只要能够找到更通用的方法，就应该优先采用更通用的方法。先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。

能力检测（性能检测） 基本模式语法

目标不是识别特定的浏览器，而是识别浏览器的能力。基本模式如下：

if (object.propertyInQuestion){
    //使用object.propertyInQuestion
}

举个例子，比如 IE5.0 之前的版本不支持 document.getElementById() 这个 DOM 方法。但可以使用 document.all[] 方法。于是可以写下如下代码：

function getElement(id){
    if (document.getElementById){
        return document.getElementById(id);
    }else if (document.getAll){
        return document.getAll[id];
    }else{
        throw new Erroor("No way to retrieve element !");
    }
}

能力检测使用的要点

先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件；

必须测试实际要是用到的特性；

对于第二点：

function getWindowWidth(){
    if (document.all){ //假设是 IE 浏览器
        return document.documentElement.clientWidth; //错误！不一定是 IE 浏览器
    } else {
        return window.innerWidth;
    }
}

如Opera 支持document.all，也支持window.innerWidth；所以上述代码用法上有问题。

更可靠的能力检测

能力检测对于想知道某个特性是否会按照适当方式行事非常有用。如检测对象是否支持排序：

function isSortable(obj){
    return typeof obj.sort == "function";
}

var obj1 = [321,43215,1];
var obj2 = {
    name: "Oliver",
    age: 18
};

console.log(isSortable(obj1)); //true
console.log(isSortable(obj2)); /false

这里需要注意的是，能力检测不是只检测相应的方法是否存在！！！

function isSortable(obj){
    return !!obj.sort;
}

var obj1 = [321,43215,1];
var obj2 = {
    name: "Oliver",
    age: 18,
    sort: true
};

console.log(isSortable(obj1)); //true
console.log(isSortable(obj2)); //true

这里就可以看出问题了，能力检测不是检测相应的方法是否存在，obj2 中定义了 sort 属性，仍然可以通过所谓的能力检测检测为 true。

所以在可能的情况下，要尽量使用 typeof 进行能力检测。

而在 IE 中，情况又不同了：

function hasCreateElement(){
    return typeof document.createElement == "function";
}

在 IE8 之前，这个函数返回 false，因为 typeof document.createElement 返回的是"object"，而不是“function”。因为 IE 及更早版本中的宿主对象是通过 COM 而非 JScript 实现的。但 IE9 中纠正了这个问题，对所有 DOM 方法都返回“function”。

能力检测，不是浏览器检测

在实际开发中，应该将能力检测作为确定下一步解决方案的依据，而不是用他来判断用户使用的是什么浏览器。如：

var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
var hasDOM1 = !!(document.getElementById && document.getElementsByTagName && document.createElement);

上述代码一个是用来确定浏览器是否支持 Netscapte 风格的插件；另一个是用来确定浏览器是否具备 DOM1 级所规定的能力。

怪癖检测

目标是识别浏览器的特殊行为。怪癖检测是想要知道浏览器存在什么缺陷。如，IE8 及更早版本中存在一个 bug，即如果某个实例属性与[[Enumerable]]标记为 false 的某个原型属性同名，那么该实例就不会出现在 for-in 循环当中。可以使用以下代码来检测这种“怪癖”：

var hasDontEnumQuirk = function(){
    var o = { toString : function(){} };
    for (var prop in o){
        if (prop == "toString"){
            return false;
        }
    }
    return true;
}();

另外，在 Safari 3 以前的版本中会枚举被隐藏的属性。可以用下面的函数来检测：

var hasEnumShadowsQuirk = function(){
    var o = { toString : function(){} }
    var count = 0;
    for (var prop in o){
        if (prop == "toString"){
            count++;
        }
    }
    return (count > 1);
}();

如果浏览器存在这个 bug，那么使用 for-in 循环枚举带有自定义的 toString() 方法的对象，就会返回两个 toString 的实例。

专线服务服务器托管云主机的要点深度学习的要点检测客户端类型 javascript代码检测

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78240.html

《JavaScript高级程序设计》笔记：客户端检测（九）

摘要：由于怪癖检测无法精确地检测特定的浏览器和版本。用户代理检测需要特殊的技巧，特别是要注意会隐瞒其用户代理字符串的情况。而在客户端，用户代理检测一般被当作一种万不得已的做法，其优先级排在能力检测和怪癖检测之后。能力检测在编写代码之前先检测特定浏览器的能力。例如,脚本在调用某个函数之前，可能要先检测该函数首付存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们把注意...

aaron 2019-08-21 10:22 评论0 收藏0
JavaScript DOM2和DOM3——“DOM的变化”的注意要点

摘要：和级分为许多模块，分别描述了的某个非常具体的子集。这些模块主要有核心视图事件样式遍历和范围以及。另外还有方法和方法框架的变化框架和内嵌框架分别用和表示，它们在级中都有一个新属性这个属性包含一个指针，指向表示框架内容的文档对象。 DOM2和DOM3级分为许多模块，分别描述了DOM的某个非常具体的子集。这些模块主要有核心（Core）、视图（Views）、事件（Events）、样式（Styl...

骞讳护 2019-08-19 17:14 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

MobService 2019-08-01 17:19 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

Andrman 2019-08-20 18:27 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

developerworks 2019-08-29 13:03 评论0 收藏0