使用&#106avascript检测浏览器的相关特性

浏览器

一、检测浏览器的名称
问题:
    不同的浏览器对javascript的标准支持也有不同,有时希望脚本能够在不同的浏览器上都能运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本。
解决方案:
    使用navigator对象的appName属性。
    比如,要检测浏览器是否为IE,可以这么做:
    var isIE = (navigator.appName == "Microsoft Internet Explorer");
    document.write("is IE?" + isIE);
    对于FireFox,navigator对象的appName属性值为"Netscape";Opera9.02的appName属性值为"Opera"(其更早版本可能不同);

二、检测浏览器的版本号:
问题:
    随着浏览器的版本的更迭,浏览器所支持的脚本特性也在变化,有时候就需要针对不同的版本编写相应的脚本,那么如何获得浏览器的版本号?
解决方案:
    通过解析navigator对象的userAgent属性来获得浏览器的完整版本号。
    IE将自己标识为MSIE,后面带一个空格,版本号以及分号。所以我们只要取空格和分号之间的部分即可。如Windows XP SP2所带的IE的userAgent属性值为"Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)",可以看到其版本为6.0。可以用如下的函数来获取IE浏览器的版本号:
    function getIEVersonNumber()
    {
        var ua = navigator.userAgent;
        var msieOffset = ua.indexOf("MSIE ");
        if(msieOffset < 0)
        {
            return 0;
        }
        return parseFloat(ua.substring(msieOffset + 5, ua.indexOf(";", msieOffset)));
    }
假设我们要为IE5及以上版本编写脚本,可以这么写:
    var isIE5Min = (getIEVersonNumber() >= 5);
    if(isIE5Min)
    {
        // perform statements for IE 5 or later
    }
    对于FireFox和Opera等浏览器,也可以用navigator.userAgent属性来获取其版本号,只不过其形式与IE有所不同,如FireFox:
    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
    Opera:Opera/9.02 (Windows NT 5.1; U; en)根据这些形式,我们不难获得其版本号。但这些浏览器的其它版本没有测试过,其具体值不明确,如果要使用这种方法检测,请自行验证。

    下面讨论下,上面的那段为IE5及以上版本浏览器编写的脚本,使用这种写法要注意:要用>=而不是==,一般情况下,我们可以假定浏览器是向后兼容的,所以使用==显然不能适应新版本;另一方面,我们上面的假定也仅仅是假定,不能确保是这样,如果浏览器的某些对象或属性不能向后兼容,我们的代码也会产生问题,所以建议,少用浏览器版本的比较,更多情况下,应检测是要用的对象或属性是否得到支持。

三、检测客户端的操作系统类型
根据上面的讨论可以看到,navigator.userAgent属性通常含有操作系统的基本信息,但很不幸,没有统一的规则去根据userAgent获取准确的操作系统信息,因为这些值与浏览器的种类、浏览器的版本甚至浏览器的OEM版本都有关系。
通常我们能做的是,检测一些更为通用的信息,比如操作系统是Windows还是Mac,而不是去看是Windows 98还是Windows XP。其规则是所有的Windows版本都会含有"Win",所有的Macintosh版本都含有"Mac",所有的Unix则含有"X11",而在Linux下则同时包含"X11"和"Linux"。如:
    var isWin = (navigator.userAgent.indexOf("Win") != -1);
    var isMac = (navigator.userAgent.indexOf("Mac") != -1);
    var isUnix = (navigator.userAgent.indexOf("X11") != -1);
通常用在为不同的操作系统设置不同的字体或位置等样式。

四、检测浏览器对特定对象的支持
问题:
    如果需要编写对多种浏览器或浏览器的多个版本都能适用的脚本,就要进行检测一下,浏览器是否支持某个对象。当然这种检测主要是针对那些潜在的不兼容对象的语句。
解决方案:
    早期的浏览器对于img元素的支持差别很大,所以要在脚本中操作img元素,需要检测浏览器是否支持。这时我们不需要对所有可能的浏览器一一检测,只需在必要的地方用下面的方式检测:
    function rollover(imgName, imgSrc)
    {
        // 如果支持images对象
        if(document.images)
        {
            // statements go here
        }
    }
    这种方法能够生效是基于一个事实:如果document.images对象不存在,那么if求值的结果为false。

    使用这种方法,使得对对象的检测变得简单易行,但是我们要注意,对于那些不支持该对象的浏览器要如何较好得处理。看下面的代码:
    function getImgAreas()
    {
        var result = 0;
        for(var i = 0; i < document.images.length; i++)
        {
            result += (document.images[i].width * document.images[i].height);
        }
        return result;
    }
  
    function reportImageArea()
    {
        document.form1.imgData.value = getImgAreas();
    }
    这里没用对象支持的检测。如果浏览器支持document.images,这两个函数运行正常;否则就会抛出异常。下面是改进的脚本:
    function getImgAreas()
    {
        var result;
        // 检测浏览器是否支持对象
        if (document.images)
        {
            result = 0;
            for (var i = 0; i < document.images.length; i++)
            {
                result += (document.images[i].width * document.images[i].height);
            }
        }
        // 返回值为一个数字或null
        return result;
    }
    function reportImageArea()
    {
        // 现在可以判断返回值
        var imgArea = getImgAreas();
        var output;
        if (imgArea == null)
        {
            // 对于不支持images对象的浏览器也要给出相应信息
            output = "Unknown";
        } else {
            output = imgArea;
        }
        document.reportForm.imgData.value = output;
    }
这样,不管浏览器是否支持该对象,都能给用户比较合理的信息,而不会跳出突兀的错误信息。

五、检测浏览器对特定属性和方法的支持
问题:
    检测一个对象是否含有某个特定的属性或方法。
解决方案:
    大多数情况下,可以用类似于下面的代码来判断:
    if(objectTest && objectPropertyTest)
    {
        // OK to work with property
    }
    先检测对象是否存在,然后再检测对象的属性是否存在。如果对象确实不存在,该方法有效;如果属性存在,但其值为null, 0, false,if语句求值的结果也将是false!所以这种方法并不安全,最好的方法是这样:
    if (objectReference && typeof(objectReference.propertyName) != "undefined")
    {
        // OK to work with property
    }
    对于方法的检测也可用类似的方法:
    function myFunction()
    {
        if (document.getElementById)
        {
            // 这里可以使用getElementById方法
        }
    }

时间: 2024-12-21 11:02:57

使用&#106avascript检测浏览器的相关特性的相关文章

使用JavaScript检测浏览器的相关特性

javascript|浏览器 一.检测浏览器的名称问题:    不同的浏览器对javascript的标准支持也有不同,有时希望脚本能够在不同的浏览器上都能运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本.解决方案:    使用navigator对象的appName属性.    比如,要检测浏览器是否为IE,可以这么做:    var isIE = (navigator.appName == "Microsoft Internet Explorer"); 

JavaScript快速检测浏览器对CSS3特性的支持情况_javascript技巧

在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持"transform",然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表. 优点: js是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用 除此之外还有一种不太好的方法,那就是判断浏览器的UA,不好的原因是UA可能会伪造,而且版本判断繁琐,还有不稳定.

《HTML5实战》——2.5 为不支持HTML5相关特性的浏览器提供回退方案

2.5 为不支持HTML5相关特性的浏览器提供回退方案 使用HTML5新特性的一个主要缺点就在于并不是所有浏览器都支持它们.所以你要照顾两个方面:那些最新.功能最强大的浏览器,以及稍微老旧一些的浏览器. 本节主要学习内容 对于HTML5特性,了解Modernizr是如何简化了对浏览器支持的侦测操作并加载回退方案的. 如何利用polyfill来弥补浏览器支持不足的状况,这是一个JavaScript回退方案,只有当所用浏览器缺乏原生支持时,该方案才起作用. 如何使用JavaScript对那些尚不能完

检测浏览器对HTML5和CSS3支持度的方法

  HTML5, CSS3 以及其他相关技术例如 Canvas.WebSocket 等等将 Web 应用开发带到了一个新的高度.该技术通过组合 HTML.CSS 和 JavaScript 可以开发出桌面应用具有的效果.尽管 HTML5 承诺很多,但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度.现在完全不担心浏览器支持是不现实的,还需要时间,因此当我们决定要采用 HTML5 技术开发 Web 应用的时候,我们需要对浏览器所支持的特性进行检测. 而

用jQuery实现检测浏览器及版本的脚本代码_jquery

如何用 Javascript 检测浏览器似乎是老生常谈的问题.根据本人的经验,使用 Javascript 检测浏览器无非使用两大类的方法. 其一,是使用使用浏览器的功能属性.比如检测浏览器是否支持 getElementById 方法就可以使用 if (document.getElementById) {     // the method exists, so use it here } else {     // do something else } 虽然这样的检测无法得知用户具体使用哪一种

javascript 检测浏览器类型和版本的代码_javascript技巧

检测浏览器及其版本的代码 复制代码 代码如下: getBrowser : function(){ var browser = { msie: false, firefox: false, opera: false, safari: false, chrome: false, netscape: false, appname: 'unknown', version: 0 }, userAgent = window.navigator.userAgent.toLowerCase(); if ( /(

javascript检测浏览器的缩放状态实现代码_javascript技巧

这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放). 检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供javascript的方法来检测浏览器的缩放. 对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放. 先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了.在普通的 PC 浏览器上,在默认无缩

JavaScript检测浏览器cookie是否已经启动的方法_javascript技巧

本文实例讲述了JavaScript检测浏览器cookie是否已经启动的方法.分享给大家供大家参考.具体分析如下: JavaScript检测浏览器cookie是否已经启动,代码稍显复杂,通过写入一个测试cookie判断cookie是否已经启动 var dt = new Date(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1; expires=" + dt.toGMTString(); var

AJAX Hacks 之HACK1. 检测浏览器的兼容性

ajax|浏览器 AJAX Hacks 之HACK1. 检测浏览器的兼容性 本节介绍如何使用JavaScript 建立起IE或Mozilla浏览器相应的请求对象.客户端使用的浏览器是各种各样的.因此也有不同的请求对象.如在Firefox, Netscape, Safari,Opera中是XMLHttpRequest.IE则是Microsoft.XMLHTTP 或 Msxml2.XMLHTTP. 使用AJAX的第一步是检测客户浏览器的类型,根据相应的类型取得request 对象.下面就是取得该对象