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

Click to edit title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,第,6,章 浏览器对象模型（,BOM,）,*,Click to edit title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,第,6,章 浏览器对象模型（,BOM,）,JavaScript,语言与,Ajax,应用（第二版,）,主编 董宁 陈,丹,中国水利水电,出版社,第,6,章 浏览器对象模型（,BOM,）,目 录,第,6,章 浏览器对象模型（,BOM,）,6.1 window,对象,6.2 location,对象,6.3 navigator,对象,6.4 screen,对象,6.5,时间间隔与暂停,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,window,对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用,window,对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。,在,JavaScript,中，,window,对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把该窗口的属性作为全局变量来使用。例如，可以只写,document,，而不必写,window.document,。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,如果文档包含框架（,frame,或,iframe,标签），浏览器会为,HTML,文档创建一个,window,对象，并为每个框架创建一个额外的,window,对象。每个框架都由它自己的,window,对象表示，存放在,frames,集合中。在,frames,集合中，可用数字（由,0,开始，逐行从左到右或名字对框架进行索引。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,【,例,6-1】window,框架。,6-1,在例,6-1,里创建了一个框架集，包括一个顶层框架和两个底层框架，使用了,frame.htm,、,anotherframe.htm,、,yetanotherframe.htm,三个页面。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,我们可以使用,window.frames0,或,window.framestopFrame,引用框架。当然，我们也可以用,top,对象代替,window,对象引用这些框架，例如,top.frames0top,对象指向的都是最顶层的框架，即浏览器窗口自身。这可以确保指向正确的框架。如果在框架内编写代码，其中引用的,window,对象就只是指向该框架的指针。,6.1 window,对象,第,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.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,2,导航和打开新窗口,用,JavaScript,可以导航到指定的,URL,，并用,window.open(),方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的,URL,、新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的,Boolean,值。一般只用前三个参数，因为最后一个参数只有在调用,window.open(),方法却不打开新窗口时才有效。,如果用已有框架的名字作为,window.open(),方法的第二个参数调用它，那么,URL,所指的页面就会被载入该框架。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,例如，要把页面载入名为,“,topFrame,”,的框架，可以使用下面的代码：,window.open(window,对象,第,6,章 浏览器对象模型（,BOM,）,window.open(),方法将返回,window,对象作为它的函数值，它就是新创建的窗口（如果给定的名字参数是已有的框架名，则为框架）。用这个对象，可以操作新创建的窗口，代码如下：,var oNewWin=window.open(window,对象,第,6,章 浏览器对象模型（,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);,看看和我一起打开的广告窗口,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,3,对话框,“,对话框,”,是指那些为用户提供有用信息的弹出窗口。除弹出新的浏览器窗口，还可使用其他方法向用户弹出信息，即利用,window,对象的,alert(),、,confirm(),和,prompt(),方法。,alert(),方法：只接受一个参数，即要显示给用户的文本。调用,alert(),方法后，浏览器将创建一个具有确定按钮的系统消息框，显示指定的文本。通常用于一些对用户的提示信息，例如在表单中输入了错误的数据时，显示警告对话框。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,confirm(),方法：只接受一个参数，即要显示的文本，浏览器创建一个具有,“,确定,”,按钮和,“,取消,”,按钮的系统消息框，显示指定的文本。该方法返回一个布尔值，如果点击,“,确定,”,按钮，返回,true,；点击,“,取消,”,按钮，返回,false,。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,prompt(),方法：提示用户输入某些信息，接受两个参数，即要显示给用户的文本和文本框中的默认文本。如果点击,“,确定,”,按钮，将文本框中的值作为函数值返回；如果点击,“,取消,”,按钮，返回空值。下面我们看一个典型的,prompt(),方法的使用：,var sresult=prompt(,你的名字是什么,?,);,if(sResult!=null),alert(,欢迎,+sResult);,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,4,状态栏,每个浏览器窗口的底部都有一个状态栏，用来向用户显示一些特定的消息。状态栏提示何时正在载入页面，何时完成载入页面。可以用,window,对象的两个属性设置它的值，即,status,和,defaultStatus,属性。,status,可以暂时改变状态栏的文本，而,defaultStatus,则可在用户离开当前页面前一直改变该文本。,例如，在第一次载入页面时，可使用默认的状态栏消息，如下：,window.defaultStatus=You are surfing,.;,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,5,访问历史,对于用户访问过的站点的列表，出于安全原因，,JavaScript,不能得到浏览器历史中包含的页面的,URL,，只能实现在历史记录间导航。而,window,对象中的,history,对象及它的相关方法即可实现在历史记录间导航的功能。,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,back(),方法：加载历史记录中的前一个,URL,。,forward(),方法：加载历史记录中的下一个,URL,。,go(),方法：跳转到指定历史记录，接受一个参数，即前进或后退的页面数。如果是负数，就在浏览器历史中后退；如果是正数，就前进。,后退一页，可用下面的代码：,window.history.go(-1);,6.1 window,对象,第,6,章 浏览器对象模型（,BOM,）,【,例,6-5】,加载历史列表中的前一个页面。,6-5,function goBack(),window.history.go(-1);/,等效于,window.history.back(),6.2 location,对象,第,6,章 浏览器对象模型（,BOM,）,Location,对象存储在,window,对象的,location,属性中，表示那个窗口中当前显示的页面的,URL,地址。表,6-3,列出了,location,的属性。,6.2 location,对象,第,6,章 浏览器对象模型（,BOM,）,href,属性是一个可读可写的字符串，可设置或返回当前显示的页面的完整,URL,。因此，我们可以通过为该属性设置新的,URL,，使浏览器读取并显示新的,URL,的内容。当一个,location,对象被转换成字符串，,href,属性的值被返回。这意味着可以使用表达式,location,来替代,location.href,。改变该属性的值，就可导航到新页面：,location.href=;,采用这种方式导航，新地址将被加到浏览器的历史栈中，放在前一个页面后，浏览器的后退按钮会导航到调用了该属性的页面。,6.2 location,对象,第,6,章 浏览器对象模型（,BOM,）,location,对象的方法。,assign(),方法：加载新的文档。,reload(),方法：重新加载当前文档。,replace(),方法：用新的文档替换当前文档。,assign(),方法：可加载一个新的文档，也可以实现与设置,location.href,属性同样的操作，例如：,location.assign();,6.2 location,对象,第,6,章 浏览器对象模型（,BOM,）,如果不想让包含脚本的页面能从浏览器历史中访问，可使用,replace(),方法。该方法所作的操作与,assign0,方法一样，但它多了一步操作，即从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的后退和前进按钮访问它了。,6.2 location,对象,第,6,章 浏览器对象模型（,BOM,）,例如：,You won,t be able to get back here,Enjoy this page for a second,because you won,t be coming back here.,setTimeout(function(),location.replace(navigator,对象,第,6,章 浏览器对象模型（,BOM,）,navigator,对象是最早实现的,BOM,对象之一，,NetscapeNavigator 2.0,和,IE3.0,引入了它。它包含大量有关,Web,浏览器的信息。可以用,window.navigator,引用它，也可以用,navigator,引用。,navigator,对象是一种事实标准，用于提供,Web,浏览器的信息。同样，缺乏标准阻碍了,navigator,对象的发展，因为不同浏览器在支持该对象的属性和方法上有差异。,6-4,表列出了最常用的属性。,6.3 navigator,对象,第,6,章 浏览器对象模型（,BOM,）,navigator,对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。,navigator,对象有五个主要属性用于提供正在运行的浏览器的版本信息：,appName,、,appVersion,、,userAgent,、,appCodeName,和,platform,。,6.3 navigator,对象,第,6,章 浏览器对象模型（,BOM,）,【,例,6-6】,有关访问者的浏览器的全部细节。,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,对象,第6,章 浏览器对象模型（,BOM,）,虽然出于安全原因，有关用户系统的大多数信息都被隐藏了，但,JavaScript,中还是可以用,screen,对象获取某些关于用户屏幕的信息。该对象提供显示器的分辨率和可用颜色数信息。该对象的属性如表,6-5,所示。,6.4 screen,对象,第,6,章 浏览器对象模型（,BOM,）,确定新窗口的大小时，,availHeight,和,availWidth,属性非常有用。例如，可以使用下面的代码让新开窗口填充用户的屏幕：,window.moveTo(0,0),window.resizeTo(screen.availWidth,screen.availHeight);,6.4 screen,对象,第,6,章 浏览器对象模型（,BOM,）,【,例,6-7】,使用,screen,对象获得屏幕属性。,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,时间间隔与暂停,第,6,章 浏览器对象模型（,BOM,）,JavaScript,支持暂停和时间间隔。所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。,window,对象的,setTimeout(),方法用于在指定的毫秒数后调用函数或计算表达式。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（,1/1000,秒）。,6.5,时间间隔与暂停,第,6,章 浏览器对象模型（,BOM,）,例如，下面的代码做出的操作都是在,1,秒钟后显示一条警告：,setTimeout(alert(Hello word!),1000);,setTimeoutfunction()alert(Hello world!);,1000;,调用,setTimeout(),时，它创建一个数字暂停,ID,。暂停,ID,本质上是要延迟的进程的,ID,，在调用,setTimeout(),后，就不应该再执行它的代码。要取消还未执行的暂停，可调用,clearTimeout(),方法，并将暂停,ID,传递给它：,var iTimeoutId=setTimeout(alert(hello world!),1000);,clearTimeout(iTimeoutId);,6.5,时间间隔与暂停,第,6,章 浏览器对象模型（,BOM,）,时间间隔与暂停的运行方式相似，只是它无限次地每隔指定的时间段就重复一次指定的代码。可调用,setlnterval(),方法设置时间间隔，它的参数与,setTimeout(),相同，是要执行的代码和每次执行之间等待的毫秒数。,6.5,时间间隔与暂停,第,6,章 浏览器对象模型（,BOM,）,【,例,6-10】setlnterval(),使用方法。,6-10,var int=self.setInterval(clock(),50);,function clock(),var t=new Date(),document.getElementById(clock).value=t,6.5,时间间隔与暂停,第,6,章 浏览器对象模型（,BOM,）,setInterval(),方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。,setInterval(),方法会不停地调用函数，直到,clearInterval(),被调用或窗口被关闭。由,setInterval(),返回的,ID,值可用作,clearInterval(),方法的参数。因为如果不取消时间间隔，就会一直执行它，直到页面被卸载为止。,本章小结,第,6,章 浏览器对象模型（,BOM,）,本章介绍了浏览器对象模型的概念，学习了,BOM,及它提供的各种对象。了解了,window,对象是,JavaScript,的核心。,这一章还讲述了如何操作浏览器窗口和框架，用,JavaScript,移动他们，调整他们的大小。用,location,对象可以访问和改变窗口和地址，用,history,可以在用户访问过的页面中前进或后退。还讲解了如何用,navigator,对象和,screen,对象获取用户浏览器和屏幕的信息。,最后，还介绍了如何利用,JavaScript,的,setTimeout(),函数和,setInterval(),函数实现暂停和时间间隔。,