最新javascript语言与ajax应用第06章 浏览器对象模型（bom(共37张ppt课件).pptx

主编(zhbin) 董宁 陈丹中国水利水电出版社第一页，共三十七页。第6章 浏览器对象(duxing)模型（BOM） 第二页，共三十七页。目 录第6章 浏览器对象(duxing)模型（BOM） 6.1 window对象对象(duxing) 6.2 location对象 6.3 navigator对象 6.4 screen对象 6.5 时间间隔与暂停第三页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）window对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生(fshng)的事件和影响窗口的浏览器特性。在JavaScript 中，window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把该窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。第四页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。每个框架都由它自己的window对象表示，存放在frames集合中。在frames集合中，可用数字（由0开始，逐行从左到右）或名字对框架进行(jnxng)索引。 第五页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）【例6-1】window框架。 6-1 在例6-1里创建了一个框架集，包括一个顶层框架和两个(lin )底层框架，使用了frame.htm、anotherframe.htm、yetanotherframe.htm三个页面。第六页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）我们可以使用window.frames0或window.framestopFrame引用框架。当然，我们也可以用top对象代替window对象引用这些框架，例如top.frames0.top对象指向的都是最顶层的框架，即浏览器窗口自身(zshn)。这可以确保指向正确的框架。如果在框架内编写代码，其中引用的window对象就只是指向该框架的指针。第七页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）1窗口操作window对象对操作浏览器窗口（或框架）非常有用，这意味着，浏览器窗口的大小是可以移动或调整的，可用下面四种方法来实现： moveBy(dx,dy)：把浏览器窗口相对当前位置水平(shupng)移动dx个像素，垂直移动dy个像素；Dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。 moveTo(x,y)：移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处，可以使用负数，但是会把部分窗口移出屏幕的可视区域。 resizeBy(dw,dh)：相对于浏览器窗口的当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素；Dw为负数，缩小窗口的宽度，dy为负数，缩小窗口的高度。 resizeTo(w,h)：把窗口的宽度调整为w，高度调整为h，不能使用负数。 第八页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM） 2导航和打开新窗口 用JavaScript可以导航到指定的URL，并用window. open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，因为最后一个参数只有在调用window. open ()方法却不打开新窗口时才有效。如果(rgu)用已有框架的名字作为window.open()方法的第二个参数调用它，那么URL所指的页面就会被载入该框架。 第九页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）例如，要把页面载入名为“topFrame”的框架，可以使用下面的代码：window. open(http:/ window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）window.open()方法将返回window对象作为它的函数值，它就是新创建的窗口（如果给定的名字参数是已有的框架名，则为框架）。用这个对象，可以操作新创建的窗口，代码如下：var oNewWin=window.open(http:/ height=150,width=300,top=10,left=10,resizable=yes);oNewWin.mveTo(100,100);oNewWin.resizeTo(200,200);还可以使用(shyng)该对象调用close()方法关闭新创建的窗口：oNewWin.close();如果新窗口中有代码，还可以在新窗口中用下面的代码关闭其自身：window.close();第十一页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）【例6-3】打开新窗口。 6-3 function openwindow() open(adv.htm, , toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0,resizable=0, width=650, height=150); 看看(kn kn)和我一起打开的广告窗口 第十二页，共三十七页。6.1 window对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）3对话框“对话框”是指那些为用户提供有用信息的弹出窗口。除弹出新的浏览器窗口，还可使用其他方法向用户弹出信息，即利用window对象的alert()、confirm()和prompt()方法。alert()方法：只接受一个参数，即要显示给用户的文本。调用alert()方法后，浏览器将创建一个具有确定按钮的系统消息框，显示指定(zhdng)的文本。通常用于一些对用户的提示信息，例如在表单中输入了错误的数据时，显示警告对话框。第十三页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM） confirm()方法：只接受一个参数，即要显示的文本，浏览器创建一个具有“确定”按钮和“取消”按钮的系统(xtng)消息框，显示指定的文本。该方法返回一个布尔值，如果点击“确定”按钮，返回true；点击“取消”按钮，返回false。第十四页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM） prompt()方法：提示用户输入(shr)某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果点击“确定”按钮，将文本框中的值作为函数值返回；如果点击“取消”按钮，返回空值。下面我们看一个典型的prompt()方法的使用：var sresult=prompt(你的名字是什么?,);if (sResult != null) alert(欢迎, + sResult);第十五页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）4状态栏每个浏览器窗口的底部都有一个状态栏，用来向用户显示一些特定的消息。状态栏提示何时正在载入页面，何时完成载入页面。可以用window对象的两个属性设置它的值，即status和defaultStatus属性。status可以暂时改变状态栏的文本，而defaultStatus则可在用户离开当前页面前一直改变该文本。例如(lr)，在第一次载入页面时，可使用默认的状态栏消息，如下： window.defaultStatus= You are surfing . ; 第十六页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）5访问历史 对于用户访问过的站点的列表，出于安全原因，JavaScript不能得到浏览器历史中包含的页面的URL，只能实现在历史记录间导航。 而window对象中的history对象及它的相关方法(fngf)即可实现在历史记录间导航的功能。第十七页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）back() 方法：加载历史记录中的前一个 URL。 forward() 方法：加载历史记录中的下一个 URL。go()方法：跳转到指定历史记录，接受一个参数，即前进或后退的页面(y min)数。如果是负数，就在浏览器历史中后退；如果是正数，就前进。后退一页，可用下面的代码： window.history.go(-1); 第十八页，共三十七页。6.1 window对象(duxing)第6章 浏览器对象(duxing)模型（BOM）【例6-5】加载历史(lsh)列表中的前一个页面。 6-5 function goBack() window.history.go(-1); /等效于window.history.back() 第十九页，共三十七页。6.2 location对象(duxing) 第6章 浏览器对象(duxing)模型（BOM） Location 对象存储(cn ch)在 window 对象的 location 属性中，表示那个窗口中当前显示的页面的 URL 地址。表6-3列出了location的属性。 第二十页，共三十七页。6.2 location对象(duxing) 第6章 浏览器对象(duxing)模型（BOM） href 属性是一个可读可写的字符串，可设置或返回当前显示的页面的完整(wnzhng) URL。因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。当一个 location 对象被转换成字符串，href 属性的值被返回。这意味着可以使用表达式 location 来替代 location.href。改变该属性的值，就可导航到新页面：location.href=http:/ ;采用这种方式导航，新地址将被加到浏览器的历史栈中，放在前一个页面后，浏览器的后退按钮会导航到调用了该属性的页面。 第二十一页，共三十七页。6.2 location对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）location对象的方法。assign() 方法：加载新的文档。 reload() 方法：重新(chngxn)加载当前文档。 replace() 方法：用新的文档替换当前文档。assign() 方法：可加载一个新的文档，也可以实现与设置location. href属性同样的操作，例如：location.assign(http:/);第二十二页，共三十七页。6.2 location对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）如果不想让包含脚本的页面能从浏览器历史中访问，可使用(shyng)replace()方法。该方法所作的操作与assign0方法一样，但它多了一步操作，即从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它了。 第二十三页，共三十七页。6.2 location对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）例如(lr)： You wont be able to get back here Enjoy this page for a second, because you wont be coming back here. setTimeout(function() location.replace(http:/ ,1000) 第二十四页，共三十七页。6.3 navigator对象(duxing) 第6章 浏览器对象(duxing)模型（BOM） navigator对象是最早实现的BOM对象之一，NetscapeNavigator 2.0和IE3.0引入了它。它包含大量有关Web浏览器的信息(xnx)。可以用window.navigator引用它，也可以用navigator引用。 navigator对象是一种事实标准，用于提供Web浏览器的信息。同样，缺乏标准阻碍了navigator对象的发展，因为不同浏览器在支持该对象的属性和方法上有差异。6-4表列出了最常用的属性。第二十五页，共三十七页。6.3 navigator对象(duxing) 第6章 浏览器对象(duxing)模型（BOM） navigator 对象(duxing)包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。navigator对象有五个主要属性用于提供正在运行的浏览器的版本信息：appName、appVersion、userAgent、appCodeName和platform。 第二十六页，共三十七页。6.3 navigator对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）【例6-6】有关(yugun)访问者的浏览器的全部细节。 6-6 var x = navigator; document.write(CodeName= + x.appCodeName); document.write(); document.write(MinorVersion= + x.appMinorVersion); document.write(); document.write(Name= + x.appName); document.write(); document.write(Version= + x.appVersion); document.write(); document.write(CookieEnabled= + x.cookieEnabled); document.write(); document.write(CPUClass= + x.cpuClass); document.write(); document.write(OnLine= + x.onLine); document.write(); document.write(Platform= + x.platform); document.write(); document.write(UA= + x.userAgent); document.write(); document.write(BrowserLanguage= + x.browserLanguage); document.write(); document.write(SystemLanguage= + x.systemLanguage); document.write(); document.write(UserLanguage= + x.userLanguage); 第二十七页，共三十七页。6.4 screen对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）虽然出于安全原因，有关用户系统的大多数信息都被隐藏了，但JavaScript中还是可以用screen对象获取某些关于用户屏幕的信息。该对象提供显示器的分辨率和可用颜色(yns)数信息。该对象的属性如表6-5所示。第二十八页，共三十七页。6.4 screen对象(duxing) 第6章 浏览器对象(duxing)模型（BOM） 确定新窗口的大小时，availHeight和availWidth属性非常有用。例如，可以使用(shyng)下面的代码让新开窗口填充用户的屏幕： window.moveTo(0,0) window.resizeTo(screen.availWidth,screen.availHeight); 第二十九页，共三十七页。6.4 screen对象(duxing) 第6章 浏览器对象(duxing)模型（BOM）【例6-7】使用screen对象获得屏幕(pngm)属性。 6-7 document.write(屏幕宽度是： + window.screen.width + ); document.write(屏幕高度是： + window.screen.height + ); document.write(屏幕色深是： + window.screen.colorDepth + ); document.write(屏幕可用宽度是： + window.screen.availWidth + ); /可用高度是除去任务栏以后的高度 document.write(屏幕可用高度是： + window.screen.availHeight + ); 第三十页，共三十七页。6.5 时间(shjin)间隔与暂停 第6章 浏览器对象(duxing)模型（BOM） JavaScript支持暂停和时间间隔。所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。 window对象的setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。该方法接受两个参数(cnsh)，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。 第三十一页，共三十七页。6.5 时间间隔(jin g)与暂停 第6章 浏览器对象(duxing)模型（BOM）例如，下面的代码做出的操作都是在1秒钟后显示一条警告：setTimeout(alert(Hello word! ) ,1000);setTimeoutfunction()alert(Hello world! );,1000;调用setTimeout()时，它创建一个数字暂停ID。暂停ID本质上是要延迟的进程的ID，在调用setTimeout()后，就不应该再执行它的代码。要取消还未执行的暂停，可调用clearTimeout()方法(fngf)，并将暂停ID传递给它：var iTimeoutId=setTimeout(alert(hello world! ) ,1000);clearTimeout(iTimeoutId); 第三十二页，共三十七页。6.5 时间(shjin)间隔与暂停 第6章 浏览器对象(duxing)模型（BOM）时间间隔与暂停的运行方式相似(xin s)，只是它无限次地每隔指定的时间段就重复一次指定的代码。可调用setlnterval()方法设置时间间隔，它的参数与setTimeout()相同，是要执行的代码和每次执行之间等待的毫秒数。 第三十三页，共三十七页。6.5 时间间隔(jin g)与暂停 第6章 浏览器对象(duxing)模型（BOM）【例6-10】setlnterval()使用(shyng)方法。 6-10 var int = self.setInterval(clock(), 50); function clock() var t = new Date() document.getElementById(clock).value = t 第三十四页，共三十七页。6.5 时间(shjin)间隔与暂停 第6章 浏览器对象(duxing)模型（BOM）setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭(gunb)。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。因为如果不取消时间间隔，就会一直执行它，直到页面被卸载为止。 第三十五页，共三十七页。本章(bn zhn)小结 第6章 浏览器对象(duxing)模型（BOM）本章介绍了浏览器对象模型的概念，学习了BOM及它提供的各种对象。了解了window对象是JavaScript的核心。 这一章还讲述了如何操作浏览器窗口和框架，用JavaScript移动他们，调整他们的大小。用location对象可以访问和改变窗口和地址，用history可以在用户访问过的页面中前进或后退。还讲解了如何用navigator对象和screen对象获取(huq)用户浏览器和屏幕的信息。最后，还介绍了如何利用JavaScript的setTimeout() 函数和setInterval() 函数实现暂停和时间间隔。 第三十六页，共三十七页。内容(nirng)总结JavaScript语言与Ajax应用（第二版）。oNewWin.mveTo(100,100)。如果点击“确定”按钮，将文本框中的值作为函数值返回。status可以暂时改变状态栏的文本，而defaultStatus则可在用户离开当前页面前(minqin)一直改变该文本。forward() 方法：加载历史记录中的下一个 URL。replace() 方法：用新的文档替换当前文档。了解了window对象是JavaScript的核心第三十七页，共三十七页。