JavaScript-浏览器兼容之客户端检测

Posted 2020-06-29 项脊轩

 前端开发最让人头痛的一件事就是浏览器兼容，正是由于浏览器间存在差异，所以我们需要根据不同的浏览器编写不同的代码，我们通常的做法是客户端检测。下面是三个比较常用的检测方法：

一、能力检测（优先考虑）

在编写代码之前先检测待定浏览器的能力，只要确定浏览器支持特定能力，就可以给出解决方案，举个例子：

IE5之前的版本不支持document.getElemnetById()，但是可以用非标准的document.all()代替，我们的代码就可以写成这样：

function getId(id){
    if(document.getElementById()){
        return document.getElementById(id);
    }else if(document.all()){
        return document.add(id);
    }else{
        throw new Error("不能获取元素");
    }
}

在能力检测中，请记住这两个重要概念：

1、先检测达成目标的最常用的特性保证代码最优化，因为多数条件下可以避免检测多个条件

2、必须测试实际要用到的特性，一个特性不存在，不代表另一个特性也不存在

 

二、怪癖检测（第二选择）

怪癖检测的目标是识别浏览器的特殊行为，想要知道浏览器存在什么“缺陷”，通常是需要运行一段小代码，用来确定某一个特性不能工作。

来看例子

IE8及之前的版本存在一个bug，如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名，那么该原型属性将不会出现在for-in循环中。在Safari3之前的版本会枚举出被隐藏的属性。

var hasEnumQuik=function(){
    var obj={
        toString:function(){}
    };
    for(var property in obj){
        if(property=="toString"){//被枚举出来了，说明存在bug
            return true;
        }
    }
    return false;
};

var hasEnumShadowQuik=function(){
    var obj={
        toString:function(){}
    };
    var count=0;
    for(var property in obj){
        if(property=="toString"){
            count++;//被枚举出来了的数目如果超过2，说明被枚举出来了
        }
    }
    return (count>1);
}

通常我们的做法是在脚本一开始就执行怪癖检测，以便尽早解决问题，给出解决方案。

 

三、用户代理检测（最后的手段）

 用户代理字符串包含了大量与浏览器相关的信息，包括浏览器，平台，操作系统以及浏览器版本。但是浏览器可以在自己的用户代理字符串里面加入一些错误的信息，达到欺骗服务器的目的，也叫“电子欺骗”。