浏览器中的JavaS.ppt

第2章 浏览器中的JavaScript,在Web开发中，确定目标浏览器和操作系统是很重要的工作。创建Ajax应用更需要确定目标浏览器，提供适当解决方案来适应客户浏览器。本章主要讲解，在JavaScript中如何确定浏览器类型和版本，为后续Ajax开发打下良好基础。 在下一节中，将要学习在JavaScript中进行浏览器判断最重要的对象navigator，以及BOM对象组。,2.1 BOM与navigator对象,本节将要学习BOM对象组和navigator对象。BOM对象组涵盖了浏览器中的一系列对象，但是各大浏览器对BOM对象组的支持不尽相同。navigator对象是判断浏览器性能的重要对象，对navigator对象的学习，将为日后跨浏览器Ajax开发打下良好的基础。,2.1.1 浏览器对象模型,BOM（浏览器对象模型），是基于浏览器的一系列对象组成。BOM包括：window、document、location、navigator、history、frames等一系列对象。BOM仅仅是JavaScript实现的一部分，没有统一标准，造成BOM在很多浏览器中有不同的实现。 在本章中，首先讲解navigator对象，然后逐渐展开BOM的一系列对象。这些所有的对象都是以window对象的属性出现的，掌握这些对象对于window对象的学习就足够了。在下一节中，将首先学习navigator对象。,2.1.2 navigator对象,navigator对象是最早实现的BOM对象之一，它包含了大量有关Web浏览器信息。使用window.navigator引用，也可以用navigator直接引用。Microsoft反对使用术语navigator，因为它指代了Netscape的浏览器。Microsoft在IE中提供了clientInfomation，但它们提供的数据完全一致。现在navigator对象成为了事实标准，基本上所有的浏览器都支持navigator对象。但是各浏览器对navigator对象支持并不一致，下表中，列出了在国内最常用两种浏览器对navigator对象的支持情况。,浏览器对navigator对象支持情况,2.2 对象/特征检测法,本节将要学习基本的浏览器性能检测方法，即对象/特征检测法。对象/特征检测法使用非常频繁，是进行跨浏览器开发的基础。在Ajax开发中，会经常使用对象/特征检测法进行浏览器性能检测，进而防止功能缺失、降低客户体验丰富度等现象的出现。,2.2.1 对象/特征检测法,前面对navigator对象有了基本的认识。在JavaScript中判断浏览器性能有两种方式，对象/特征检测法和user-agent字符串检测法。这两种方法的使用都有各自适用的场合，需要加以区分。在本节中首先学习对象/特征检测法。 对象/特征检测法特点是，在使用给定对象之前首先检查该对象存在与否。当使用DOM方法document.eval()，首先要确定客户端浏览器是否支持该方法，可以用以下代码判断：,2.2.2 对象/特征检测法重点,对象/特征检测法重点在于，使用一个对象或者对象方法、属性前，首先检测该对象或该对象方法、属性是否存在。注意如果检测对象方法是否存在，不能出现括号，如果出现了括号解析器就会调用该方法，如果方法不存在就会产生错误。,2.2.3 对象/特征检测法优缺点,在实际开发中，如果只关心目标浏览器具体方法或属性是否存在，那么使用对象/特征检测法更为恰当。在本书中某些地方使用了对象/特征检测法，而在其他地方，使用user-agent方法检测浏览器性能更为恰当。 对象/特征检测法优点，体现在可以实时查看浏览器是否具有支持具体对象、属性、方法的能力，代码相对简单。但是在大型跨平台应用开发中，全部使用对象/特征检测法来侦测浏览器性能，就需要检测所有对象、属性、方法，带来大量的代码冗余，降低速度。在这种情况下，使用user-agent方法进行浏览器性能判断更为恰当。,2.3 user-agent字符串检测法,在上一节中，学习了对象/特征检测法判断浏览器性能。但是在大型的跨浏览器Ajax应用中，使用对象/特征检测法会非常繁琐。在本节中，将要学习一种简单的浏览器性能判断方法，即user-agent字符串检测法。对本章中讲解的两种浏览器性能检测方法，如果能灵活的组合使用，就可以很容易的规避各浏览器性能不一带来的兼容性问题。,2.3.1 user-agent字符串检测法,user-agent字符串检测法是最古老的浏览器检测方式。在2.1.1节表2.1中，可以看到navigator.userAgent属性在IE、Firefox中都支持。通过window.navigator.userAgent属性来访问，navigator.userAgent属行提供了Web浏览器大量信息，包括浏览器名称及版本等。在表中列出了国内最常用两种浏览器的userAgent属性。,浏览器中user-agent字符串表示,2.3.2 更好的使用user-agent字符串检测法,在上一节中，介绍了如何通过字符串解析获得浏览器信息，在代码中一一判断浏览器版本很复杂。代码如下(详细内容请参照本书) 以上代码仅仅判断浏览器Mozilla版本，如果大于等于4.0则是IE 5.0或Firefox 1.1以上，即可以支持大多数对象，还可以配合对象/特征检测对某些生僻方法进行判断，可以准确规避浏览器版本带来的开发困难。在下一节中讲解JavaScript中重要对象window对象。,2.4 window对象,Window对象表示整个浏览器窗口，它包含了很多浏览器显示属性等浏览器重要信息。学习window对象为日后进行复杂Ajax开发打下了良好的基础。BOM对象的基础就是window对象，一切BOM对象都可以通过window对象的属性访问。本节将讲解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像素。 resizeBy(x,y)：调整浏览器窗口当前大小。当width或height为正数时，即增加当前浏览器窗口宽度或高度。当width或height为负数时，即减小当前浏览器窗口宽度或高度。,2.4.2 系统对话框,对话框是以模态窗口方式打开的，用户必须进行响应，可以很好的提示用户。在JavaScript中有3种不同方式进行对话框提醒用户。 window.alert()通过包含简单信息的对话框进行用户提示。以下代码进行调用window.alert()方法。 window.alert(String information);,2.4.3 状态栏控制,状态栏经常用以显示系统信息、时间等基本提示信息。在JavaScript中，通过window对象的status属性和defaultStatus进行状态栏控制。通过以下代码进行状态栏信息显示： window.status=“information“;/设定状态栏信息 window.defaultStatus=“information“;/设定状态栏默认信息 很多网站在按钮的onmouseover属性下，设定状态栏属性为链接地址进行用户提示。但不要过度使用状态栏，会分散用户注意力。还有很多网站滚动状态栏信息，显得业余。而滚动状态栏需要使用window对象的时间间隔和暂停方法。,2.4.4 时间间隔和暂停,JavaScript支持使用时间间隔和暂停，很类似WinForm技术中Timer控件。JavaScript使用window对象的setTimeout()方法进行在一定时间间隔下执行固定工作。调用window.setTimeout()代码如下所示： window.setTimeout(code,msNum); code即固定时间间隔所执行的代码，可以是方法名，可以是简单代码。msNum即时间间隔的毫秒数，必须是正整数。当调用setTimeout()时会返回一个数字暂停ID，与线程ID很相似。clearTimeout()方法可以根据数字暂停ID来取消还未执行的操作。以下代码展示了如何调用clearTimeOut()方法： var timeOutID=window.setTimeout(“code“,msNum); window.clearTimeout(timeOutID);,2.4.5 浏览器历史记录,在所有浏览器中都提供了历史记录功能，用以保存用户访问过的站点列表。在JavaScript中处于安全原因，不能直接访问浏览器历史中的URL，只能通过调用window.history属性及它的相关方法进行浏览器历史访问。表列出了window.history的重要和方法。,window.history的属性和方法,2.4.6 screen对象,在JavaScript中出于安全考虑，开发人员很难访问到用户硬件信息。Window.screen属性使开发人员可以访问用户屏幕信息。表中列出了screen对象基本属性（很多浏览器添加了基于自身的属性，但是应用不广泛没有一一列出）。,screen对象基本属性,2.4.7 location对象,locatio对象是window对象属性，表示载入窗口的URL。Location对象既是window的属性也是document属性，window.location与document.location等价。在JavaScript中经常使用location对象进行URL解析。表中列出了location对象的重要属性和方法。,location对象的重要属性和方法,2.5 小结,在本章中，学习了BOM对象组中的大多数对象，这些对象都可以通过window对象的属