进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网站开发 -> JavaScript -> 文章内容  
使用JavaScript检测浏览器的相关特性

 

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

二、检测浏览器的版本号:
问题:
    随着浏览器的版本的更迭,浏览器所支持的脚本特性也在变化,有时候就需要针对不同的版本编写相应的脚本,那么如何获得浏览器的版本号?
解决方案:
    通过解析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)根据这些形式,我们不难获得其版本号。但这些浏览器的其它版本没有测试过,其具体值不明确,如果要使用这种方法检测,请自行验证。www.goodsgy.com

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

三、检测客户端的操作系统类型
根据上面的讨论可以看到,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);
通常用在为不同的操作系统设置不同的字体或位置等样式。www.goodsgy.com

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

    使用这种方法,使得对对象的检测变得简单易行,但是我们要注意,对于那些不支持该对象的浏览器要如何较好得处理。看下面的代码:
    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;
    }
这样,不管浏览器是否支持该对象,都能给用户比较合理的信息,而不会跳出突兀的错误信息。www.goodsgy.com

五、检测浏览器对特定属性和方法的支持
问题:
    检测一个对象是否含有某个特定的属性或方法。
解决方案:
    大多数情况下,可以用类似于下面的代码来判断:
    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方法
        }
    }www.goodsgy.com

在百度中搜索:使用JavaScript检测浏览器的相关特性
在Google中搜索:使用JavaScript检测浏览器的相关特性
在Yahoo中搜索:使用JavaScript检测浏览器的相关特性

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· [组图] 简单使用PS历史画笔快速美化照片
· [图文] WPS演示中应用荧光笔的使用技巧
· WinServer 2008下调教IE使用有巧招
· 消除使用QQ后带来的安全隐患
· [图文] 网页标准制作:使用ul多行多列布局..
· 高效使用Linux的七个习惯
· 普通用户Excel使用VBA的几个误区
· [图文] Excel使用技巧:分列功能的妙用
· [图文] Excel技巧:使用中国式排名效果
· 选择使用新版Excel 2007的10条理由
 
· 用JS解决网站防挂iframe木马的方案
· 技巧 JavaScript常用判断函数
· IE浏览器中一个值得关注的JS问题
· 简易实现DIV圆角的JavaScript代码
· Javascript调用XML制作连动下拉框
· Javascript实现页内查找关键词实例
· JavaScript的系统函数学习
· JavaScript仿Windows关机效果
· javascript弹出窗口问题总结
· 在JS中使用RecordSet对象的GetRows方法

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)