第06章浏览器对象模型(BOM)

《第06章浏览器对象模型(BOM)》由会员分享，可在线阅读，更多相关《第06章浏览器对象模型(BOM)（37页珍藏版）》请在装配图网上搜索。

1、JavaScrip t语言与Ajax应用第6章浏览器对象模型(BOM) 6. 1window对象匸.6. 2locationj.6. 3navigator对象 .6. 4 screen对象 6.5 时间间隔与暂停第6章浏览器对象模型（BOM）6. 1window 对象 window对象表不浏览器中打开的窗口，提供 关于窗口状态的信息？可以用window对象访 问窗口中绘制的文档、窗口中发生的事件和 影响窗口的浏览器特性。汙在JavaScript中，window对象是全局对象, 所有的表达式都在当前的环境中计算。也就 是说，要引用当前窗口根本不需要特殊的语 法，可以把该窗口的属性作为全局变量来使

2、 用。例如，可以只写document,而不必写 window, document。如果文档包含框架（franie或iframe 标签），浏电器会为HTML文档创建 一个window对象，并为每个框架创 建一个额外的window对象。每个框 架都由它自己的window对象表示，存 放在frames集合中。在frames集合中, 可用数字（由0开始，逐行从左到右） 或名字对框架进行索引。【例6-1】window框架。_6-l 雪frameset rows二100, * frameset cols二50%, 50%在例6匚1里创建了一个框架集，包括一个顶层框架和两个底层框架，农 用 /frame h

3、tm、 anotherframe htm、 yetanotherframehtin二个页 面。第6章 浏览器对象模型（BOM）6. 1 window 对象我们可以使用window, frames 0或 windowframestopFrame 弓丨 用 框架。当然,莪们色可以用top对 象祀替window对豪引用这些*匡架， 例如top. frames 0. top对象指向 的都是最顶层的框架，即浏览器窗 口自身。这可以确保指向正确的框架。如果在框架内编写代码，其中溜齋咖对象就只是指向该框1.窗口操作-window对象对操作浏览器窗口 (或框架)出常有用,这意味着,浏览器窗口的大小是可以移动或

4、调整的，可用下面四种方法来实现：moveBy (dx, dy):把浏览器窗口相对当前位置水 卜移动dx个像素， 垂直移动dy个像素；Dx值为负数，向左移动窗口，dy值为负数，向 上移动窗口。(2) moveTo (x, y):移动浏览器窗口，使它的左上角位于用戸屏幕的 (x,y)处，可以使用负数，但是会把部分窗口移出屏幕的可视区域。resizeBy (dw, dh):相对于浏览器窗口的当前大小,把窗口的宽度 调整dw个像素，高度调整dy个像素；Dw为负数，缩小窗口的宽度， dy为负数，缩小窗口的高度。 resizeTo(w, h)：把窗口的宽度调整为w,高度调整为h,不能使用 负数。2.导航和

5、打开新窗口用JavaScript以导航到指定的URL?并用, window, open ()方法打开薪窗门。该方法接 受四个参数，即要载入新窗口的页面的URL、 新窗口的名字、特性字符串和说明是否用新 载入的页面替换当前識入的页面Boolean值。 一般只用前三个参数，因为最后一个参数只 有袒调用windowopen ()方法却不打亓薪窗 口时才有效。如果用已有框架的名字作为window. open()方 法的笫二个琴数调用它，那么URL所指的页面 就会菠载夬该框架。例如，要把页固载入名为一 “topFraine”的框架， 可以使用下面的代码：vwindow. fopen (z，http:/w

6、ww. wrox. coin/, topFrame/z); 这行代码的操作就像是点击一个链接，”该链接的href 为 “http: /. www. wrox. coin/”, target为 a topFrame,的框架。如果声明的框架名无效，window, open()将打开 新的窗口，该窗口的特性由第三个参数(特 性字符串)决定。如果省略第三个参数，将 打开新的浏览器窗口，就像点击了target被 设置为“_bbnk”的链接。这样新浏览器窗口 的设置与默认浏览器窗口的设置就是完全一 样。第6章 浏览器对象模型(EOM)6. 1window 对象window. open()方法将返回wind

7、ow对彖作为它的函数值，它就是新创建 的窗口(如果给定的名字参致是已苞的框架名,则为框架)。用这 个对象，可以操作新创毎的窗口，代码如下： var oNewWin=window. open(z/http :/www wrox. com/，wrowindow,height二 150, width二300, top=10, left二 10, resizable二yes); oNewWin. mveTo(100, 100);oNewWin. resizeTo(200, 200);还可以使用该对象调用closeO方法关闭新创建的窗口： oNewWin. closeO ;如果新窗口中有代码，还可以在新

8、窗口屮用下面的代码关闭其自身: window close ();【例6-3】打开新窗口。head?-63/titl function openwindow() Wkopen (/zadv. htrn, “，/ztoolbars=0, scrollbars=0, location=0, statusbars=0,menubars=0, resizable=O, width=650, height=150z，); h2看看和我一起打开的广告窗口 第6章 浏览器对象模型（EOM）6. 1 window 对象3.对话框 _厶 “对话框”是指那些为用户提供有用信息的弹出 窗口。除弹出新的浏览器窗口，还可

9、使用其他方 法向用户弹出詹息，即利用window对象的 alert () conf irrn () Hprompt()方法。 alert ()方法：只接受一个参数，即要显示给用 户的文本。调用alert ()方法后，浏览器将创建 一个具有确定按钮的系统消息框，显示指定的文 本。通常用于一些对用户的提示信息，例如在表 单中输入了错误的数据时，显示警告对话框。 confinn（）方法：只接受一个参数，即（要显示的文本，測览器创建一个具有“确定”按钮和“取消”按钮的系统消 息框，显示指定的文本。该方法返回一 个布尔值，如果点击“确定”按钮，返 回true；点击“取消”按钮，返回 falseo pro

10、mpt ()方法：提示用户输入某些信息，接 受两个参数，即要显示给用户的文本和文本 框中的默认文本。如果点击“确定”按钮， 将文本框中的值作为函数值返回；如果点击“取消”按钮，返回空值。下面我们看一个 典型的prompt ()方法的使用：var sresult=prompt (z，你的名字是什么？“，“) if (sResult !二 null) alert(z，欢迎，+ sResult);状态样每定刘览器窗口的底部都有一个状态栏，用 来向用户显示一些特定的消息。状态栏提示 彳可时正在载入页面，彳可日寸完歳载入页面。可 攻甬window对彖的两个盧桂设置它的（t, BP sta tus 和 d

11、ef au ltStatu s 属性。stat us 可以暂 时改变状态栏的文本，而defaultStatus则可 在用户离开当前页面前一直改变该文本。 例如，在第一次载入页面时，可使用默认的 状态栏消息，如下：window, defaultStatus二 You are surfingwww. wrox corn- :第6章浏览器对象模型（BOM）6. 1 window 对象5访问历史醸对于用户访问过的站点的列表，出于安 全原因，JavaScript不能得到浏览器历 史中包含的页面的URL,只能实现在历 史记录间导航。而window对象中的 history对象及它的相关方法即可实现 在历史记

12、录间导航的功能。第6章浏览器对象模型（BOM）6. 1 window 对象back()方法：加载历史记录中的前一个URLo forward()芳法：加载厉史记录中的下一个 URLo 書1go ()方法：跳转到指定历史记录，接受一个 参数，即前进或后退的页面数。如果是负数， 就在浏览器历史中后退；如果是正数，就前 进。后退一页，可用下面的代码：window, history. go(-1);【例6-5】加载历史列表屮的前一个页面。65 funct ion goBackO window history go (-1) ;/等效于window history back()第6章 浏览器对象模型（EO

13、M）6. 2location对象 Location对象存储在window对象的 location属性中，表示那个窗口中当 前显示的页面的URL地址。表6-3列出 T location 的属性。 href属性是一个可读可写的字符串，可设置或返 回当前显示的页面的完整URL。因此，我们可以 通过为该属性设置、新的URL,使浏览器读取并显 不新的URL的内容。当一个location对彖被转 换成字符串，、吐ef属性的值被返回。这意味着可 以使用表达式location来替代location, href o 改变该属性的值，就可导航到新页面： location. href二http:/ www:wrow

14、. com，z;采用这种方式导航，新地址将被加到浏览器的历 史栈中，放在前一个页面后，浏览器的后退按钮 会导航到调用了该属性的页面。第6章浏览器对象模型（BOM）6. 2location对象location对象的方法。assign()方法:加载新的文档。reload()方法：重新加载当前文档。replace ()方法：用新的文档替换当前文档。 assignO方法：可加载一个新的文档，也可 以实现与设置locationhref属性同样的 操作，例如：location. assign (/zhttp: /www. wrox com); 如果不想让包含脚本的页面能从浏 览器历史中访问，可使用repl

15、ace () 方法。该方法所作的操作与 assignO方法一样，但它多了一步 操作，即从浏览器历史中删除包含 脚本的页面，这样就不能通过浏览 器的后退和前进按钮访问它了。第6章浏览器对象模型(BOM)6. 2location对象例如:_You wo nt be able to get back here/ti tie body宁Enjoy this page for a second, because you wont be coming back here/psetTimeout (functionO location.replace(http:/ww wrox com/);, 1000)/

16、script 第6章 浏览器对象模型（EOM）6. 3navigator对象 navigatcy?对象是最早实现的BOM对象之 ,NetscapeNavigator 2. 0和IE3.0引 入了它它包含大量有关Web浏览器的 信息。可以用window, navigator引用它, 也可以用navigator引用。 navigator对象是一种事实标准，用于 提供Web浏览器的信息。同样，缺乏标 准B且碍了navigator对象白6废展，因 不同浏览器在支持该对象的属性和方法 上有差异。6-4表列岀了最常用的属性。 navigator对象包含的属性描述了正在 使用的浏览器。可以傻用这些属性进行

17、平台专用的配置。navigator对象有五 个主要呼性用于提供正在运行的浏览器 的版本信息:appName、appVersion userAgent、appCodeName和platform。第6章浏览器对象模型（BOM）6. 3navigator对象第6章浏览器对象模型(BOM)6. 3navigator对象【例6托】右关访问者的浏览藩的全部细讥head6-6var x = navigator;document write( document write( document write( document write( document write( document write( docu

18、ment write( document write( document write( document write( document write( document write( document write( document write( document vrite( document vrite( document write( document write( document write( document write( document write( document write( document vrite( CodeNae= + x. appCodeName);br /)

19、；MmorVersion= + x. appMmorV已rsion););Name二+ x appName);br /)：Version二 + x appVersion);br /)；CookieEnabled= + xcookieEnabled););CPUClass= + x cpuClass);?;OnLine= + x onLine);br /)；Platform= + x.platfoxn););UA= + x use工Agent););Br owserL anguage=z，+ x brows exLanguage););Sys t end. anguag e= + x syste

20、Language););UserLanguage=，z + x.userLanguage);第6章浏览器对象模型(BOM)6. 4scTeen对象虽然出于安全原因，有关用户系 统的大多都被隐藏了， 但JavaScript屮还是可以用 screen对象获取某些关于用户 屏幕的信息。该对象提供显示 器的分辨率和可用颜色数信息。 该对象的属性如表6-5所示。第6章浏览器对象模型（BOM）6. 4scTeen对象确定新窗口的大小时，ava订Height和 availWidth属性41 Mfl用。例如，可以 使用下面的代码让新开窗口填充用户的 屏幕： window. moveTo (0, 0)windo

21、w. resizeTo(screen. availWidt扎 screen. availHeight);第6章浏览器对象模型(BOM)6.5 时间间隔与暂停【例6-7】使用screen对象获得屏幕属性。壬67）；言W；document, write（屏幕高度是：+ window. screen. height + bt/）；“document write（屏幕色j采是: + window. screen. colorDepth + z/z）;document. writeC屏幕可用宽度是： + window, screen. availWidth + bx7）；/可用高度是除去任务栏以后的高度

22、 document, write（/?屏卷可用瓯度是： +window, scree n. avail Height + /zz，）; JavaScript支扌丰暂骸口时间间隔。所谓 暂停，是在指定的毫秒数后执行指定的 代码。时间间隔是反复执行指定的代码,-每次执行之同等待指定的毫秒数。/ window对象的setTimeout（）方法用于 在指定的毫秒数后调用函数或计算表达 式。该方法接受两个参数，要执行的代 码和在执行它之前要等待的毫秒数（1/1000秒）。第6章浏览器对象模型（BOM）6.5 时间间隔与暂停例如，下面的代码俾出的舞作都是在1秒钟后显示一条警告: setTi.uieout

23、(/zalert (J Hello word! )1000);setTimeout function() alert (Z/Hello world! )；，1000; W调用setTimeout ()时，它创建一个数字暂停ID。暂停ID本 质上是耍延迟的进程的ID,在调用setTimeout ()后，就 不应该再执行它的代0马。娶取消还未执行的暂停，可调 用clearTimeout 6方法，并将暂停ID传递给它：var iTimeoutId=setTiuieout (alert (hello world!，) ，1000);clearTimeout (iTimeoutlcl);时间间隔与暂停的

24、运行方式相似，只是它 无限次地每隔指定的间段就重复一次 指定的代码。可调用setinterval ()方 法设置时间间隔，它的参数与 setTimeout ()相同，是要执行的代码和 每次执行之间等待的毫秒数。【例6-10 set.Interval ()使用方法。6-10 script type二text/javascript var int = self, setinterval (z/clock ()z，, 50); function clock () var t = new Date () document, getE1 ementById(z，c 1 ockz/).value = t

25、setinterval ()力法一可按照指定的周 期(以毫秒计)来呗函数或计算 表达式。setinterval ()方法会不 停地调用函数，直到 、 clearinterval ()被调用或窗口被 关闭。由setinterval ()返回的 ID 值可用作 clearinterval ()方 法的参数。因为如果不取消时间间 隔，就会一直执行它，直到页面被 歸载止。第6章 浏览器对象模型（EOM）I本章小结本章介绍兀浏览器对象模型的概念，学习了 BOM芨它揭供俯各种XtMo TWTwindow对象 是 J avaScrip t 的核心。这一章还讲述了如何操作浏览器窗口和框架， 用JavaScript慈动施衍，谪整施们的大小。用location对象可以访问和改变窗口和地址， 用history可以在用户访问过的页面中前进或 启退。还讲解了如何用navigator对象和 screen对象获取用户浏览器和屏幕的信息。最后，还介绍了如，何利用JavaScript的、 setTimeout ()函数和setinterval ()函数实 现暂停和时间间隔。第6章浏览器对象模型(BOM)