分享
 
 
 

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

王朝html/css/js·作者佚名  2008-05-30
窄屏简体版  字體: |||超大  

一、检测浏览器的名称

问题:

不同的浏览器对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方法

}

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有