JavaScript语言与Ajax应用第06章 浏览器对象模型（BOM）.ppt

JavaScript语言与Ajax应用（第二版）,主编董宁陈丹中国水利水电出版社,第6章浏览器对象模型（BOM）,目录,第6章浏览器对象模型（BOM）,6.1window对象6.2location对象6.3navigator对象6.4screen对象6.5时间间隔与暂停,6.1window对象,第6章浏览器对象模型（BOM）,window对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。在JavaScript中，window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把该窗口的属性作为全局变量来使用。例如，可以只写document，而不必写window.document。,6.1window对象,第6章浏览器对象模型（BOM）,如果文档包含框架（frame或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。每个框架都由它自己的window对象表示，存放在frames集合中。在frames集合中，可用数字（由0开始，逐行从左到右）或名字对框架进行索引。,6.1window对象,第6章浏览器对象模型（BOM）,【例6-1】window框架。6-1在例6-1里创建了一个框架集，包括一个顶层框架和两个底层框架，使用了frame.htm、anotherframe.htm、yetanotherframe.htm三个页面。,6.1window对象,第6章浏览器对象模型（BOM）,我们可以使用window.frames0或window.framestopFrame引用框架。当然，我们也可以用top对象代替window对象引用这些框架，例如top.frames0.top对象指向的都是最顶层的框架，即浏览器窗口自身。这可以确保指向正确的框架。如果在框架内编写代码，其中引用的window对象就只是指向该框架的指针。,6.1window对象,第6章浏览器对象模型（BOM）,1窗口操作window对象对操作浏览器窗口（或框架）非常有用，这意味着，浏览器窗口的大小是可以移动或调整的，可用下面四种方法来实现：moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素；Dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。moveTo(x,y)：移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处，可以使用负数，但是会把部分窗口移出屏幕的可视区域。resizeBy(dw,dh)：相对于浏览器窗口的当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素；Dw为负数，缩小窗口的宽度，dy为负数，缩小窗口的高度。resizeTo(w,h)：把窗口的宽度调整为w，高度调整为h，不能使用负数。,6.1window对象,第6章浏览器对象模型（BOM）,2导航和打开新窗口用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，因为最后一个参数只有在调用window.open()方法却不打开新窗口时才有效。如果用已有框架的名字作为window.open()方法的第二个参数调用它，那么URL所指的页面就会被载入该框架。,6.1window对象,第6章浏览器对象模型（BOM）,例如，要把页面载入名为“topFrame”的框架，可以使用下面的代码：window.open(,6.1window对象,第6章浏览器对象模型（BOM）,window.open()方法将返回window对象作为它的函数值，它就是新创建的窗口（如果给定的名字参数是已有的框架名，则为框架）。用这个对象，可以操作新创建的窗口，代码如下：varoNewWin=window.open(,6.1window对象,第6章浏览器对象模型（BOM）,【例6-3】打开新窗口。6-3functionopenwindow()open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,6.1window对象,第6章浏览器对象模型（BOM）,3对话框“对话框”是指那些为用户提供有用信息的弹出窗口。除弹出新的浏览器窗口，还可使用其他方法向用户弹出信息，即利用window对象的alert()、confirm()和prompt()方法。alert()方法：只接受一个参数，即要显示给用户的文本。调用alert()方法后，浏览器将创建一个具有确定按钮的系统消息框，显示指定的文本。通常用于一些对用户的提示信息，例如在表单中输入了错误的数据时，显示警告对话框。,6.1window对象,第6章浏览器对象模型（BOM）,confirm()方法：只接受一个参数，即要显示的文本，浏览器创建一个具有“确定”按钮和“取消”按钮的系统消息框，显示指定的文本。该方法返回一个布尔值，如果点击“确定”按钮，返回true；点击“取消”按钮，返回false。,6.1window对象,第6章浏览器对象模型（BOM）,prompt()方法：提示用户输入某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果点击“确定”按钮，将文本框中的值作为函数值返回；如果点击“取消”按钮，返回空值。下面我们看一个典型的prompt()方法的使用：varsresult=prompt(你的名字是什么?,);if(sResult!=null)alert(欢迎,+sResult);,6.1window对象,第6章浏览器对象模型（BOM）,4状态栏每个浏览器窗口的底部都有一个状态栏，用来向用户显示一些特定的消息。状态栏提示何时正在载入页面，何时完成载入页面。可以用window对象的两个属性设置它的值，即status和defaultStatus属性。status可以暂时改变状态栏的文本，而defaultStatus则可在用户离开当前页面前一直改变该文本。例如，在第一次载入页面时，可使用默认的状态栏消息，如下：window.defaultStatus=Y.;,6.1window对象,第6章浏览器对象模型（BOM）,5访问历史对于用户访问过的站点的列表，出于安全原因，JavaScript不能得到浏览器历史中包含的页面的URL，只能实现在历史记录间导航。而window对象中的history对象及它的相关方法即可实现在历史记录间导航的功能。,6.1window对象,第6章浏览器对象模型（BOM）,back()方法：加载历史记录中的前一个URL。forward()方法：加载历史记录中的下一个URL。go()方法：跳转到指定历史记录，接受一个参数，即前进或后退的页面数。如果是负数，就在浏览器历史中后退；如果是正数，就前进。后退一页，可用下面的代码：window.history.go(-1);,6.1window对象,第6章浏览器对象模型（BOM）,【例6-5】加载历史列表中的前一个页面。6-5functiongoBack()window.history.go(-1);/等效于window.history.back(),6.2location对象,第6章浏览器对象模型（BOM）,Location对象存储在window对象的location属性中，表示那个窗口中当前显示的页面的URL地址。表6-3列出了location的属性。,6.2location对象,第6章浏览器对象模型（BOM）,href属性是一个可读可写的字符串，可设置或返回当前显示的页面的完整URL。因此，我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL的内容。当一个location对象被转换成字符串，href属性的值被返回。这意味着可以使用表达式location来替代location.href。改变该属性的值，就可导航到新页面：location.href=;采用这种方式导航，新地址将被加到浏览器的历史栈中，放在前一个页面后，浏览器的后退按钮会导航到调用了该属性的页面。,6.2location对象,第6章浏览器对象模型（BOM）,location对象的方法。assign()方法：加载新的文档。reload()方法：重新加载当前文档。replace()方法：用新的文档替换当前文档。assign()方法：可加载一个新的文档，也可以实现与设置location.href属性同样的操作，例如：location.assign();,6.2location对象,第6章浏览器对象模型（BOM）,如果不想让包含脚本的页面能从浏览器历史中访问，可使用replace()方法。该方法所作的操作与assign0方法一样，但它多了一步操作，即从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它了。,6.2location对象,第6章浏览器对象模型（BOM）,例如：YouwontbeabletogetbackhereEnjoythispageforasecond,becauseyouwontbecomingbackhere.setTimeout(function()location.replace(,6.3navigator对象,第6章浏览器对象模型（BOM）,navigator对象是最早实现的BOM对象之一，NetscapeNavigator2.0和IE3.0引入了它。它包含大量有关Web浏览器的信息。可以用window.navigator引用它，也可以用navigator引用。navigator对象是一种事实标准，用于提供Web浏览器的信息。同样，缺乏标准阻碍了navigator对象的发展，因为不同浏览器在支持该对象的属性和方法上有差异。6-4表列出了最常用的属性。,6.3navigator对象,第6章浏览器对象模型（BOM）,navigator对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。navigator对象有五个主要属性用于提供正在运行的浏览器的版本信息：appName、appVersion、userAgent、appCodeName和platform。,6.3navigator对象,第6章浏览器对象模型（BOM）,【例6-6】有关访问者的浏览器的全部细节。6-6varx=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.4screen对象,第6章浏览器对象模型（BOM）,虽然出于安全原因，有关用户系统的大多数信息都被隐藏了，但JavaScript中还是可以用screen对象获取某些关于用户屏幕的信息。该对象提供显示器的分辨率和可用颜色数信息。该对象的属性如表6-5所示。,6.4screen对象,第6章浏览器对象模型（BOM）,确定新窗口的大小时，availHeight和availWidth属性非常有用。例如，可以使用下面的代码让新开窗口填充用户的屏幕：window.moveTo(0,0)window.resizeTo(screen.availWidth,screen.availHeight);,6.4screen对象,第6章浏览器对象模型（BOM）,【例6-7】使用screen对象获得屏幕属性。6-7document.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时间间隔与暂停,第6章浏览器对象模型（BOM）,JavaScript支持暂停和时间间隔。所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。window对象的setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。,6.5时间间隔与暂停,第6章浏览器对象模型（BOM）,例如，下面的代码做出的操作都是在1秒钟后显示一条警告：setTimeout(alert(Helloword!),1000);setTimeoutfunction()alert(Helloworld!);,1000;调用setTimeout()时，它创建一个数字暂停ID。暂停ID本质上是要延迟的进程的ID，在调用setTimeout()后，就不应该再执行它的代码。要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它：variTimeoutId=setTimeout(alert(helloworld!),1000);clearTimeout(iTimeoutId);,6.5时间间隔与暂停,第6章浏览器对象模型（BOM）,时间间隔与暂停的运行方式相似，只是它无限次地每隔指定的时间段就重复一次指定的代