- 浏览: 197369 次
- 性别:
- 来自: 上海
最新评论
-
zhuzhuaijq:
Flash OBJECT和EMBED标签详解 -
matt.u:
好像有点深奥。
一篇比较好演示AS的重构方法 -
luofeng113:
分析得不错,
flex编程感受 -
felixsky:
请问flexunit如何测试private和internal的 ...
FLEXUnit应用 -
wv1124:
你不能分个页啊,看得人都要死了
Apollo: 开发者问答录
一、检测浏览器的名称
问题:
不同的浏览器对javascript的标准支持也有不同,有时希望脚本能够在不同的浏览器上都能运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本。
解决方案:
使用navigator对象的appName属性。
比如,要检测浏览器是否为IE,能够这么做:
var isIE = (navigator.appName == "Microsoft Internet Explorer");
document.write("is IE?" + isIE);
对于FireFox,navigator对象的appName属性值为"Netscape";Opera9.02的appName属性值为"Opera"(其更早版本可能不同);
二、检测浏览器的版本号:
问题:
随着浏览器的版镜母榔魉С值慕疟咎匦砸苍诒浠惺焙蚓托枰攵圆煌陌姹颈嘈聪嘤Φ慕疟荆敲慈绾位竦娩榔鞯陌姹竞牛?BR>解决方案:
通过解析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方法
}
}
以上内容由 华夏名网 收集整理,如转载请注明原文出处,并保留这一部分内容。
“华夏名网” http://www.sudu.cn 和 http://www.bigwww.com 是成都飞数科技有限公司的网络服务品牌,专业经营虚拟主机,域名注册,VPS,服务器租赁业务。公司创建于2002年,经过近5年的高速发展,“华夏名网”已经成为我国一家知名的互联网服务提供商,被国外权威机构webhosting.info评价为25大IDC服务商之一。
华夏名网网址导航: 虚拟主机 双线主机 主机 域名注册 cn域名 域名 服务器租赁 酷睿服务器 vps vps主机 cdn
问题:
不同的浏览器对javascript的标准支持也有不同,有时希望脚本能够在不同的浏览器上都能运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本。
解决方案:
使用navigator对象的appName属性。
比如,要检测浏览器是否为IE,能够这么做:
var isIE = (navigator.appName == "Microsoft Internet Explorer");
document.write("is IE?" + isIE);
对于FireFox,navigator对象的appName属性值为"Netscape";Opera9.02的appName属性值为"Opera"(其更早版本可能不同);
二、检测浏览器的版本号:
问题:
随着浏览器的版镜母榔魉С值慕疟咎匦砸苍诒浠惺焙蚓托枰攵圆煌陌姹颈嘈聪嘤Φ慕疟荆敲慈绾位竦娩榔鞯陌姹竞牛?BR>解决方案:
通过解析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方法
}
}
以上内容由 华夏名网 收集整理,如转载请注明原文出处,并保留这一部分内容。
“华夏名网” http://www.sudu.cn 和 http://www.bigwww.com 是成都飞数科技有限公司的网络服务品牌,专业经营虚拟主机,域名注册,VPS,服务器租赁业务。公司创建于2002年,经过近5年的高速发展,“华夏名网”已经成为我国一家知名的互联网服务提供商,被国外权威机构webhosting.info评价为25大IDC服务商之一。
华夏名网网址导航: 虚拟主机 双线主机 主机 域名注册 cn域名 域名 服务器租赁 酷睿服务器 vps vps主机 cdn
发表评论
-
如何优化JavaScript脚本的性能
2008-08-19 10:01 1118如何优化JavaScript脚本的 ... -
几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
2008-08-18 16:53 1648AJAX是web20的基石,现在 ... -
CSS技巧集合
2008-08-14 13:08 1004一.使用css缩写 使 ... -
IE6下png图片和png背景透明
2008-08-14 12:56 18667http://www.163show.cn/blog/inde ... -
记录没有看完
2008-07-24 10:50 837http://www.iteye.com/news/1816 -
实现不同域(Domain)之间的数据交换
2008-07-15 15:49 1438引言 前些天在对公司原有的 web 应用进行改版时遇到一个问题 ... -
网页中超长文字的断行问题
2008-07-15 10:11 1898网页中超长文字的断行问题2006/9/25 at 01:50 ... -
JS中的instanceof和typeof
2008-06-24 16:35 1673对于instanceof和typeof,以前偶尔的用到过,特别 ... -
JavaScript OOP
2008-06-16 15:25 837JavaScript的对象总有4类: 脚本对象 ... -
prototype.js简易教程文档2
2008-05-26 17:41 11344.15. options 参数对象 AJAX操作中一个重要的 ... -
prototype.js简易教程手册1
2008-05-26 17:39 14961. Prototype是什么? 或许你还没有用过它, pro ... -
JavaScript[对象.属性]集锦
2008-05-26 17:37 915SCRIPT 标记 用于包含JavaScript代码. ... -
使用Session常见问题集锦
2008-05-26 17:35 1053问:为什么Session在有些 ... -
css例子
2008-05-22 19:15 1457原文作者:Douglas Bowman ... -
转载--Cookie专题
2008-05-22 16:28 1184Document 对象中有一个cook ... -
Javascript数组及其操作
2008-05-22 16:26 7896本文介绍如下几个方面的内容: 1.如何创建数组 2.如何对数 ... -
js事件
2008-05-22 11:23 1745一.今天的事件 事件是DOM的一部分,在DOM Level ... -
ie和firefox的兼容性问题
2008-05-22 11:21 9651.event.srcElement问题 在IE下,even ... -
学习javascript的事件
2008-05-22 11:18 949在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很 ... -
js的&&和&,||和|运算符两个不同点
2008-05-22 11:15 11761.性能上的比较 如果&&的第一个运算数是f ...
相关推荐
Feature.js是一款轻量级的浏览器特性检测JavaScript库插件。该插件运行速度快,使用简单,文件只有1kb大小。通过Feature.js你可以检测客户浏览器是否支持某些特性,并针对这些特性编写代码。
在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持“transform”,然后我的布局会有两种完全不同的版式。 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行...
我大致翻译了部分文章,可能有理解错误的地方,敬请指正。值得一提的是,评论部分的争论亦值得一看。特性检测 起初前端工程师们就极力反对浏览器检测,他们认为类似user-agent...前者是检测浏览器的特殊名称和版本;
Modernizr, 在用户浏览器中,Modernizr是一个用来检测HTML5和CSS3特性的JavaScript库 是一个JavaScript库,它在用户浏览器中检测HTML5和CSS3功能。网站文档文档rtc测试当前wince中的本机iseries和HTML5特性,并使用...
示例描述:介绍JavaScript的面向对象特性。 4.1.html 对象的创建。 4.2.html 作为关联数组的对象与数组对象实现方式比较。 4.3.html prototype的用法。 4.4.html prototype实现继承机制。 4.5....
HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。...下面代码检测浏览器是否支
2.3.3 浏览器特性hack 2.4 文档注释 第3章 语句和表达式 3.1 花括号的对齐方式 3.2 块语句间隔 3.3 switch语句 3.3.1 缩进 3.3.2 case语句的“连续执行” 3.3.3 default 3.4 with语句 3.5 for循环 3.6 ...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异步测试更简单更有趣。Mocha 可以持续运行测试,支持灵活又准确的报告,当映射到未捕获异常时转到正确的测试示例。 特性...
本书要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScriptAPI。本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端...
事件检测,即检测某一事件在不同的浏览器中是否存在(可用),这在编写Javascript的过程中也非常重要,如mouseenter/mouseleave事件虽然实用,但并不是所有浏览器都提供了标准的支持,因此需要自己手动模拟,即:...
第13章 Web浏览器中的JavaScript309 13.1 客户端JavaScript309 13.2 在HTML里嵌入JavaScript313 13.3 JavaScript程序的执行319 13.4 兼容性和互用性326 13.5 可访问性333 13.6 安全性334 13.7 ...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增...
2.3.3 浏览器特性hack 2.4 文档注释 第3章 语句和表达式 3.1 花括号的对齐方式 3.2 块语句间隔 3.3 switch语句 3.3.1 缩进 3.3.2 case语句的“连续执行” 3.3.3 default 3.4 with语句 3.5 for循环 3.6 ...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
第13章 Web浏览器中的JavaScript309 13.1 客户端JavaScript309 13.2 在HTML里嵌入JavaScript313 13.3 JavaScript程序的执行319 13.4 兼容性和互用性326 13.5 可访问性333 13.6 安全性334 13.7 ...
6.2.2.1 一个使用Arguments对象检测形参的例子 6.2.2.2 一个使用Arguments对象接收任意个数参数的例子 6.2.2.3 一个使用Arguments对象模拟函数重载的例子 6.2.3 参数类型匹配--一个利用arguments实现...