JavaScript学习笔记（8）

最新推荐文章于 2025-05-28 08:00:00 发布

liuyueyi1995

最新推荐文章于 2025-05-28 08:00:00 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 浏览器检测

本文链接：https://blog.youkuaiyun.com/liuyueyi1995/article/details/52791312

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了浏览器兼容性检测的三种主要方法：能力检测、缺陷检测和用户代理检测，并探讨了它们的应用场景与优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端检测

现在市场上浏览器种类众多，不同的内核，同一内核的不同版本，其具体实现和对标准的支持程度都不相同，为了让程序正常的运行在各类浏览器之上，就需要对WEB客户端进行检测。
但是，不到万不得已最好不要使用客户端检测，最好先设计通用方法，然后再根据特定浏览器的技术增强方案。

1 能力检测

能力检测的目标不是识别特定的浏览器，而是浏览器的能力。这种方法不用顾及特定浏览器，只要确定其支持特定的能力即可。

if (object.propertyInQuestion) { //判断该对象是否该存在property
    //如果存在，则使用这个property
}

能力检测的原则就是：

先检测达成目的的最常用的特性（即大多数浏览器都支持的特性，这样可以提升检测性能）
必须测试实际要用到的特性（一个特性存在，不一定意味着另一个特性也存在）
尽可能使用typeof进行能力检测

能力检测不是浏览器检测，仅仅检测几个特性不能确定浏览器。实际上，根据浏览器不同将能力组合起来是更可取的方式，即将程序所用到的一切相关浏览器特性一次性检测。

//确定浏览器是否具有DOM1级规定的能力
var hasDOM1 = !!(document.getElementById 
                && document.createElement 
                && document.getElementsByTagName)；

2 缺陷检测

缺陷检测的目标是识别浏览器的特殊行为，但是其方法是检测浏览器存在什么缺陷。通常需要运行一小段代码，以确定某一特性不能正常工作。

3 用户代理检测

通过检测用户代理字符串来确定实际使用的浏览器。每一次HTTP请求过程中，该字符串作为响应头发送，可以通过navigator.userAgent属性访问。但是这个方法容易被欺骗。

3.1 识别呈现引擎

这种检测方法根本是检测呈现引擎，而不是浏览器的名字或者版本，因为只要是使用相同版本的内核，其支持的特性一般是相同的。目前主流的呈现引擎有IE、Gecko、Webkit、KHTML、Opera

var client = function(){
    var engine = { //用于标记用户代理的类型
        ie : 0,
        gecko ：0,
        webkit : 0,
        khtml : 0,
        opera : 0,
        ver : null //存放具体的版本号
    };

    var useragent = navigator.userAgent;

    if (window.opera) {
        engine.ver = window.opera.version();
        engine.opera = parseFloat(engine.ver);
    } else if (/AppleWebkit\/(\S+)/.test(useragent)){
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);
    } else if (/KHTML\/(\S+)/.test(useragent)) {
        engine.ver = RegExp["$1"];
        engine.khtml = parseFloat(engine.ver);
    } else if (/rv:([^\)]+\) Gecko\/\d{8}/.test(useragent)) {
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
    } else if (/MSIE ([^;]+)/.test(useragent)) {
        engine.ver = RegExp["$1"];
        engine.ie = parseFloat(engine.ver);
    }
    return {
        engine : engine
    };
}();

与之类似的还有对浏览器、操作系统、移动端设备的检测，其核心原理都是对字符串的正则匹配以及调用特殊的属性来获取相应的值。

3.2 用户代理检测的适用情形

由于用户代理检测比较麻烦，所以优先考虑能力检测和缺陷检测，但仍然有需要用户代理检测的情况：
- 不能直接准确地适用能力检测或缺陷检测。例如有的浏览器为今后添加功能预留的桩函数，经测试其是否存在，并不能解决问题。
- 同一款浏览器在不同操作系统上具备不同的能力，就需要对平台有检测。
- 为了跟踪分析等目的需要确切的浏览器信息。