第2章浏览器中的JavaScript.ppt

《第2章浏览器中的JavaScript.ppt》由会员分享，可在线阅读，更多相关《第2章浏览器中的JavaScript.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第2章 浏览器中的JavaScript在Web开发中，确定目标浏览器和操作系统是很重要的工作。创建Ajax应用更需要确定目标浏览器，提供适当解决方案来适应客户浏览器。本章主要讲解，在JavaScript中如何确定浏览器类型和版本，为后续Ajax开发打下良好基础。在下一节中，将要学习在JavaScript中进行浏览器判断最重要的对象navigator，以及BOM对象组。2.1 BOM与navigator对象本节将要学习BOM对象组和navigator对象。BOM对象组涵盖了浏览器中的一系列对象，但是各大浏览器对BOM对象组的支持不尽相同。navigator对象是判断浏览器性能的重要对象，对nav

2、igator对象的学习，将为日后跨浏览器Ajax开发打下良好的基础。2.1.1 浏览器对象模型BOM（浏览器对象模型），是基于浏览器的一系列对象组成。BOM包括：window、document、location、navigator、history、frames等一系列对象。BOM仅仅是JavaScript实现的一部分，没有统一标准，造成BOM在很多浏览器中有不同的实现。在本章中，首先讲解navigator对象，然后逐渐展开BOM的一系列对象。这些所有的对象都是以window对象的属性出现的，掌握这些对象对于window对象的学习就足够了。在下一节中，将首先学习navigator对象。2.1.2

3、 navigator对象navigator对象是最早实现的BOM对象之一，它包含了大量有关Web浏览器信息。使用window.navigator引用，也可以用navigator直接引用。Microsoft反对使用术语navigator，因为它指代了Netscape的浏览器。Microsoft在IE中提供了clientInfomation，但它们提供的数据完全一致。现在navigator对象成为了事实标准，基本上所有的浏览器都支持navigator对象。但是各浏览器对navigator对象支持并不一致，下表中，列出了在国内最常用两种浏览器对navigator对象的支持情况。浏览器对navigat

4、or对象支持情况navigator对象的属性说明IEFirefoxappCodeName浏览器代码名称（如Mozilla）支持支持appName官方浏览器名字符串表示支持支持appVersion浏览器版本信息支持支持language浏览器当前语言不支持支持mimeTypes注册到浏览器mime数组支持支持systemLanguage当前操作系统语言支持不支持userAgent用户代理头字符串支持支持userLanguage用户语言支持不支持javaEnabled是否支持java语言支持支持browserLanguage浏览器语言版本支持不支持cpuClass当前用户及其CPU类型支持不支持co

5、okieEnabled当前用户是否允许存储cookie支持支持online用户是否在线支持支持product当前浏览器产品名不支持支持vendor品牌浏览器名称不支持支持2.2 对象/特征检测法本节将要学习基本的浏览器性能检测方法，即对象/特征检测法。对象/特征检测法使用非常频繁，是进行跨浏览器开发的基础。在Ajax开发中，会经常使用对象/特征检测法进行浏览器性能检测，进而防止功能缺失、降低客户体验丰富度等现象的出现。2.2.1 对象/特征检测法前面对navigator对象有了基本的认识。在JavaScript中判断浏览器性能有两种方式，对象/特征检测法和user-agent字符串检测法。这两

6、种方法的使用都有各自适用的场合，需要加以区分。在本节中首先学习对象/特征检测法。对象/特征检测法特点是，在使用给定对象之前首先检查该对象存在与否。当使用DOM方法document.eval()，首先要确定客户端浏览器是否支持该方法，可以用以下代码判断：2.2.2 对象/特征检测法重点对象/特征检测法重点在于，使用一个对象或者对象方法、属性前，首先检测该对象或该对象方法、属性是否存在。注意如果检测对象方法是否存在，不能出现括号，如果出现了括号解析器就会调用该方法，如果方法不存在就会产生错误。2.2.3 对象/特征检测法优缺点在实际开发中，如果只关心目标浏览器具体方法或属性是否存在，那么使用对象/

7、特征检测法更为恰当。在本书中某些地方使用了对象/特征检测法，而在其他地方，使用user-agent方法检测浏览器性能更为恰当。对象/特征检测法优点，体现在可以实时查看浏览器是否具有支持具体对象、属性、方法的能力，代码相对简单。但是在大型跨平台应用开发中，全部使用对象/特征检测法来侦测浏览器性能，就需要检测所有对象、属性、方法，带来大量的代码冗余，降低速度。在这种情况下，使用user-agent方法进行浏览器性能判断更为恰当。2.3 user-agent字符串检测法在上一节中，学习了对象/特征检测法判断浏览器性能。但是在大型的跨浏览器Ajax应用中，使用对象/特征检测法会非常繁琐。在本节中，将要

8、学习一种简单的浏览器性能判断方法，即user-agent字符串检测法。对本章中讲解的两种浏览器性能检测方法，如果能灵活的组合使用，就可以很容易的规避各浏览器性能不一带来的兼容性问题。2.3.1 user-agent字符串检测法user-agent字符串检测法是最古老的浏览器检测方式。在2.1.1节表2.1中，可以看到navigator.userAgent属性在IE、Firefox中都支持。通过window.navigator.userAgent属性来访问，navigator.userAgent属行提供了Web浏览器大量信息，包括浏览器名称及版本等。在表中列出了国内最常用两种浏览器的userAg

9、ent属性。浏览器中user-agent字符串表示IEMozilla/4.0(compatible;MSIE 6.0;Windows NT 5.1;SV1;Websaver;.NET CLR 1.1.4322;.NET CLR 2.0.50727;InfoPath.2;.NET CLR 3.0.04506.590)FirefoxMozilla/5.0(Windows;U;Windows NT 5.1;zh-CN;rv:1.8.1.7)Gecko/20070914(FoxPlus)Firefox/2.0.0.7+2.3.2 更好的使用user-agent字符串检测法在上一节中，介绍了如何通过字符

10、串解析获得浏览器信息，在代码中一一判断浏览器版本很复杂。代码如下(详细内容请参照本书)以上代码仅仅判断浏览器Mozilla版本，如果大于等于4.0则是IE 5.0或Firefox 1.1以上，即可以支持大多数对象，还可以配合对象/特征检测对某些生僻方法进行判断，可以准确规避浏览器版本带来的开发困难。在下一节中讲解JavaScript中重要对象window对象。2.4 window对象Window对象表示整个浏览器窗口，它包含了很多浏览器显示属性等浏览器重要信息。学习window对象为日后进行复杂Ajax开发打下了良好的基础。BOM对象的基础就是window对象，一切BOM对象都可以通过wind

11、ow对象的属性访问。本节将讲解window对象的基本属性。2.4.1 window对象属性window对象实际上就被认为是浏览器窗口，使用window对象可以很容易的调节浏览器窗口大小。window对象具有以下方法用于操作浏览器窗口大小：moveBy(x,y)：浏览器窗口在当前位置水平移动x像素，垂直移动y像素。当x为负数时向左移动窗口，当y为负数时向上移动窗口。moveTo(x,y)：移动浏览器窗口使其左上角位于屏幕（x，y）处。x，y可以使用负数，但是浏览器冲口会部分移出屏幕显示区域。resizeTo(width,height)：调整浏览器窗口大小。宽度为width像素，高度为height

12、像素。resizeBy(x,y)：调整浏览器窗口当前大小。当width或height为正数时，即增加当前浏览器窗口宽度或高度。当width或height为负数时，即减小当前浏览器窗口宽度或高度。2.4.2 系统对话框对话框是以模态窗口方式打开的，用户必须进行响应，可以很好的提示用户。在JavaScript中有3种不同方式进行对话框提醒用户。window.alert()通过包含简单信息的对话框进行用户提示。以下代码进行调用window.alert()方法。window.alert(String information);2.4.3 状态栏控制状态栏经常用以显示系统信息、时间等基本提示信息。在Ja

13、vaScript中，通过window对象的status属性和defaultStatus进行状态栏控制。通过以下代码进行状态栏信息显示：window.status=information;/设定状态栏信息window.defaultStatus=information;/设定状态栏默认信息很多网站在按钮的onmouseover属性下，设定状态栏属性为链接地址进行用户提示。但不要过度使用状态栏，会分散用户注意力。还有很多网站滚动状态栏信息，显得业余。而滚动状态栏需要使用window对象的时间间隔和暂停方法。2.4.4 时间间隔和暂停JavaScript支持使用时间间隔和暂停，很类似WinForm技

14、术中Timer控件。JavaScript使用window对象的setTimeout()方法进行在一定时间间隔下执行固定工作。调用window.setTimeout()代码如下所示：window.setTimeout(code,msNum);code即固定时间间隔所执行的代码，可以是方法名，可以是简单代码。msNum即时间间隔的毫秒数，必须是正整数。当调用setTimeout()时会返回一个数字暂停ID，与线程ID很相似。clearTimeout()方法可以根据数字暂停ID来取消还未执行的操作。以下代码展示了如何调用clearTimeOut()方法：var timeOutID=window.se

15、tTimeout(code,msNum);window.clearTimeout(timeOutID);2.4.5 浏览器历史记录在所有浏览器中都提供了历史记录功能，用以保存用户访问过的站点列表。在JavaScript中处于安全原因，不能直接访问浏览器历史中的URL，只能通过调用window.history属性及它的相关方法进行浏览器历史访问。表列出了window.history的重要和方法。window.history的属性和方法方法或属性名称说明go(index)跳转至history中index索引指示的URL。当index为负整数，即后退index项历史记录。当index为正整数，即前进

16、index项历史记录。back()回退至当前页面在history中所处位置的下一项历史记录forward()前进至当前页面在history中所处位置的前一项历史记录lengthlength属性记录了当前浏览器历史记录列表项长度2.4.6 screen对象在JavaScript中出于安全考虑，开发人员很难访问到用户硬件信息。Window.screen属性使开发人员可以访问用户屏幕信息。表中列出了screen对象基本属性（很多浏览器添加了基于自身的属性，但是应用不广泛没有一一列出）。screen对象基本属性属性名称说明availHeight浏览器窗口可以使用的屏幕高度，以像素为单位。availWi

17、dth窗口可以使用屏幕宽度，以像素为单位。colorDepth用户屏幕颜色的位数。一般情况为32位。height屏幕高度，以像素为单位。width屏幕宽度，以像素为单位。2.4.7 location对象locatio对象是window对象属性，表示载入窗口的URL。Location对象既是window的属性也是document属性，window.location与document.location等价。在JavaScript中经常使用location对象进行URL解析。表中列出了location对象的重要属性和方法。location对象的重要属性和方法属性或方法名说明hash()如果窗口URL包含#，该方法返回该符号后面的内容（例如：http:/ 小结在本章中，学习了BOM对象组中的大多数对象，这些对象都可以通过window对象的属性进行访问。window对象是BOM对象组中最重要的对象，在Ajax开发中会贯穿对window对象的使用。在2.2、2.3节中，讲解了两种最常用的浏览器检测法。对这两种方法的灵活使用，在本书后期的Ajax开发实例精讲中会为读者做更多的分析。下一章，将要学习Ajax技术中最关键的XMLHttpRequest对象，XMLHttpRequest对象是Ajax实现异步提交与解析服务器数据的关键，对XMLHttpRequest对象的学习将贯穿本书。