美文网首页
Javascript-能力检测

Javascript-能力检测

作者: 厦门_小灰灰 | 来源:发表于2018-12-29 16:48 被阅读0次

我们知道,各个版本的浏览器有着许多不一致性。理想状态下,应该是所有的浏览器都提供一套标准的API接口。但是现实中,各个版本的浏览器存在的怪癖非常多,我们通常都是使用客户端检测来作为补救措施。但是我们应该知道,不到万不得已,不要使用客户端检测。只要能找到更通用的方法,就应该优先采用更通用的方法。总之。先设计最通用的方案,在使用特定于浏览器的技术增强该方案。

  • 能力检测
    最常用的也是最广泛使用的客户端检测技术是能力检测(特性检测)。能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何,只需确定浏览器是否支持特定的能力,就可以给出相关的方案。其基本默认如下:
if (object.property) {
    //使用obj.property
}

举例来说,IE5不支持document.getElementById这个DOM方法。尽管可以使用非标准的document.all属性实现相同的功能。但是早期的IE的确不支持document.getElementById。所以通过下面的特性检测来保证浏览器的兼容性。请看下面的例子:

if (document.getElementById) {
    return document.getElementById[id];
} else if (document.all) {
    return document.all[id];
} else {
    throw new Error("不存在搜索DOM接口");
}

我们看到方法是想返回指定Id的DOM元素。document.getElementById()是实现这一功能的标准方式,所以首先检测它。如果浏览器不支持这个方法,那么久退而求其次使用document.all属性来实现类似的功能。如果这两个特性都无法使用,那么说明这个方法无法使用了。

第二个重要的概念在于:必须检测实际要用到的特性。一个特性存在,并不意味着另一个特性也存在。请看下面的例子:

function getWindowWidth() {
    //假设是IE浏览器
    if (document.all) {
        //错误的用法
        return document.documentElement.clientWidth;
    }
    else {
        return window.innerWidth;
    }
}

这是一个错误使用能力检测的例子。在这个例子中,首先检测document.all这个特性。然后使用document.documentElement.clientWidth返回窗体的宽度。IE8之前的浏览器确实不支持window.innerWidth属性。但是document.all属性成立的浏览器并不是只有IE。Opera也支持这个属性,也支持window.innerWidth。我们使用到了document.documentElement.clientWidth,这个也是需要进行特性检测的。

更可靠的能力检测

能力检测对于想知道某个特性是否会按适当的方式行事非常有效。我们在上面介绍的利用类型转换来确定某个对象成员是否存在,但这样是还是不知道该成员是不是你想要的。下面我们来看一个例子:

//这只是检测了是否存在相应的方法或属性--这不是能力检测
function isSortable(obj) {
    return !!obj.sort;
}

这个函数通过检测对象是否有sort方法来确定对象是否支持排序。但是如果一个对象包含了sort属性,那么也会返回true。这会导致一些问题。所以更好的方法是检测sort是否是一个函数。例如:

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

这里的typeof操作符用于确定sort的确是一个函数。所以后期可以使用sort进行排序。

在可能的情况下,应该尽量使用typeof操作符进行能力检测。

相关文章

  • Javascript-能力检测

    我们知道,各个版本的浏览器有着许多不一致性。理想状态下,应该是所有的浏览器都提供一套标准的API接口。但是现实中,...

  • javascript-怪癖检测

    怪癖检测指的是识别浏览器的特殊行为,就是浏览器的缺陷行为。通常是运行一段代码来确定某个特性不能正常工作。 在 IE...

  • javascript-用户代理检测

    用户代理检测指的是,检测用户代理字符串来确定用户实际使用的浏览器。在服务端,用户代理检测是一种常见且广为让人接受的...

  • JavaScript高级程序设计笔记9

    客户端检测 能力检测 (1)更可靠的能力检测 (2)能力检测,不是浏览器检测 怪癖检测 用户代理检测 (1)用户代...

  • JavaScript 高级程序设计(第9章 客户端检测)

    第9章 客户端检测 1. 能力检测 能力检测的基本模式: (1) 更可靠的能力检测 (2) 能力检测,不是浏览器检...

  • 9 客户端检测

    本章内容 使用能力检测 用户代理检测的历史 选择检测方式 9.1 能力检测 能力检测的基本模式如下: 举例子,IE...

  • javascript 高级程序设计 第九章

    客户端检测 9.1 能力检测 能力检测: 能力检测针对不同浏览器或者浏览器版本不同所进行的检测。不同的浏览器里可...

  • JavaScript-字符串对象方法应用

    JavaScript-字符串对象方法应用

  • Javascript 机器学习资源汇总

    翻译 Machine Learning in Javascript- A compilation of Resou...

  • 客户端检测

    本文主要简单介绍客户端检测的三种方式:能力检测、怪癖检测、用户代理检测 能力检测 最常用、广泛的客户端检测形式 是...

网友评论

      本文标题:Javascript-能力检测

      本文链接:https://www.haomeiwen.com/subject/kilplqtx.html