第6章JavaScript浏览器对象模型BOM课件.ppt

《第6章JavaScript浏览器对象模型BOM课件.ppt》由会员分享，可在线阅读，更多相关《第6章JavaScript浏览器对象模型BOM课件.ppt（74页珍藏版）》请在三一办公上搜索。

1、第6章浏览器对象模型（BOM）,本章将介绍浏览器对象模型（BOM），它是JavaScript编程技术的重要组成部分。BOM提供了独立于页面内容而与浏览器窗口进行交互的对象。,6.1 浏览器对象,BOM由一系列相关的对象构成，图6-1所示为BOM的基本体系结构。Window对象是整个BOM的核心，所有对象和集合都以某种方式与window对象关联。,图6-1 BOM对象关系图,BOM中定义了6种重要的对象：（1）window对象表示浏览器中打开的窗口；（2）document对象表示浏览器中加载页面的文档对象；（3）location对象包含了浏览器当前的URL信息；（4）navigator对象包含了

2、浏览器本身的信息；（5）screen对象包含了客户端屏幕及渲染能力的信息；（6）history对象包含了浏览器访问网页的历史信息。,除window对象之外，其他的5个对象都是window对象的属性，它们与window对象的关系如图6-1所示。下面将从window对象开始讨论BOM。,6.1.1 window对象,Window对象表示整个浏览器窗口，但不包括其中的页面内容。Window对象可以用于移动或者调整其对应的浏览器窗口的大小，或者对它产生其他影响。在浏览器宿主环境下，window对象就是JavaScript的Global对象，因此使用window对象的属性和方法是不需要特别指明的。例如我

3、们经常使用的alert方法，实际上完整的调用形式应该是window.alert，通常情况下我们在代码中会省略window对象的声明，直接使用其方法。,window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类：（1）调整窗口的大小和位置；（2）打开新窗口；（3）系统提示框；（4）状态栏控制；（5）定时操作。,1调整窗口的大小和位置,（1）window.moveBy该方法将浏览器窗口移动指定的距离（相对定位）。用法：window.moveBy(dx,dy),（2）window.moveTo,该方法将浏览器窗口移动到指定的位置（绝对

4、定位）。用法：window.moveTo(x,y),（3）window.resizeBy,该方法将浏览器窗口的大小改变为指定的宽度和高度（相对调整窗口大小）。用法：window.resizeBy(dw,dh),（4）window.resizeTo,该方法将浏览器窗口的大小改变为指定的宽度和高度（绝对调整窗口大小）。用法：window.resizeTo(w,h),2打开新窗口,用法：window.open(url,target,options)options参数可能的选项包括：（1）height:窗口的高度，单位为像素；（2）width：窗口的宽度，单位为像素；（3）left：窗口的左边缘位置；

5、（4）top：窗口的上边缘位置；（5）fullscreen：是否全屏，默认值为no；（6）location:是否显示地址栏，默认值为yes；,（7）menubar:是否显示菜单项，默认值为yes；（8）resizable:是否允许改变窗口大小，默认值为yes；（9）scrollbars:是否显示滚动条，默认值为yes；（10）status:是否显示状态栏，默认值为yes；（11）titlebar:是否显示标题栏，默认值为yes；（12）toolbar:是否显示工具条，默认值为yes。,3系统对话框,（1）window.alert该方法将显示消息提示框。用法：window.alert(messa

6、ge),（2）window.confirm,该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。用户单击“确定”按钮时，window.confirm返回true；单击“取消”按钮时，window.confirm返回false。用法：window.confirm(message),（3）window.prompt,该方法将显示一个消息提示框，其中包含一个文本输入框。用法：window.prompt(message,default),4状态栏控制,浏览器状态的显示信息可以通过window.status属性直接进行修改。,5定时操作,定时操作通常有两种使用目的，一种是周期性地执行脚本，例如在

7、页面上显示时钟，需要每隔一秒钟更新一次，另一种则是将某个操作延时一段时间执行，例如某个特别耗时的操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行不受影响。,（1）window.setInterval,该函数用于设置定时器，每隔一段时间执行指定的代码。用法：window.setInterval(code,interval)【例6-1】timer1.html,（2）window.clearInterval,该函数用于清除setInterval函数设置的定时器。用法：window.clearInterval(timer)【例6-2】counter1.html

8、,（3）window.setTimeout,该函数用于设置定时器，在一段时间之后执行指定的代码。用法：window.setTimeout(code,time)【例6-3】timer2.html,（4）window.clearTimeout,该函数用于清除setTimeout函数设置的定时器。用法：window.clearTimeout(timer)【例6-4】counter2.html,6.1.2 document对象,document对象实际上是window的属性，document对象的独特之处是它既属于BOM又属于DOM。从BOM角度看，document对象由一系列集合构成，这些集合可以访

9、问文档的各个部分，并提供页面自身的信息。由于BOM没有统一的标准，各种浏览器中的document对象特性并不完全相同，因此在使用document对象时需要特别注意，尽量要使用各类浏览器都支持的通用属性和方法。,1通用属性,（1）document.bgColor该属性为页面的背景色。（2）document.fgColor该属性为页面的前景色。,（3）documentColor该属性为页面文档中链接的颜色。（4）document.vlinkColor该属性为页面文档中访问过的链接颜色。（5）document.alinkColor该属性为页面文档中激活链接的颜色。,（6）document.domai

10、n该属性为文档所在的域名。（7）document.referrer该属性为将用户引入当前页面的URL。（8）document.URL该属性为当前页面的URL。,（9）document.title该属性为当前页面的标题。（10）document.lastModified该属性为上次修改页面的时间。（11）document.cookie该属性用于设置或者读取Cookie的值。,【例6-5】Cookie存取函数,2集合属性,表6-1document对象的集合属性,3方法,（1）document.write/writeln该方法用于在当前文档中输出文字。用法：document.write(text)d

11、ocument.writeln(text),（2）document.open,document.open和document.close是一组方法，通常与document.write/writeln方法配合使用。其中，document.open方法用于打开文档准备写入内容。用法：document.open(),（3）document.close,该方法用于关闭文档，同时将写入的内容输出到页面。用法：document.close(),6.1.3 location对象,表6-2location对象属性,表6-3 location对象属性,6.1.4 navigator对象,navigator对象包含

12、了关于Web浏览器的信息，浏览器的类型、版本信息都可以从该对象中获取。表6-4给出了navigator对象各个属性的含义。,表6-4navigator对象属性,续表,表6-5navigator对象属性值示例,6.1.5 screen对象,表6-6screen对象属性,【例6-6】screen对象应用示例,6.1.6 history对象,表6-7history对象属性和方法,6.2 JavaScript浏览器编程示例,在JavaScript中进行浏览器编程通常包括以下几种情况：（1）浏览器窗口的控制；（2）定时操作；（3）页面之间的参数传递；（4）浏览器类型、操作系统类型的判断。下面将按照以上的

13、应用需求分别介绍相关的示例。,6.2.1 控制浏览器窗口,1打开新窗口 window.open方法的使用方法在前面已经作了说明，然而在实际应用中，仅仅打开一个新的窗口并不能真正解决问题。考虑一个实际的应用场景：在邮件系统中写新邮件或者回复邮件时，我们一般会在主界面上直接编辑邮件内容，如果邮件还没有编辑完成，我们却需要查看其他邮件，这时就要开启一个新的浏览器窗口继续编辑邮件内容。,当然，我们希望已经编辑的部分能够在新浏览器窗口中保留。图6-2所示的Gmail邮件系统就具有类似的功能，下面我们将模仿它实现一个简单的示例。,（a）Gmail主界面,（b）在新窗口中编辑邮件图6-2 Gmail邮件编辑

14、界面,【例6-7】ex1.html【例6-8】ex2.html,2窗口最大化,这里所说的“窗口最大化”并不是指单击浏览器窗口右上角的“最大化”按钮，在正常情况下，浏览器窗口中菜单栏、工具条、地址栏都会占用一些空间，而在一些Web应用中我们希望能够使用最大化的工作区域，而将菜单、工具条等隐藏。,【例6-9】ex3.html,图6-5 Firefox参数配置界面,【例6-10】ex4.html,3父子窗口间交互,通过window.open方法打开的窗口一般不是孤立的，它与父窗口通常需要进行数据的交互。例如很多应用系统都会提供这样的检索功能：在进行比较复杂的检索时，通常会打开一个新的窗口，用户在新窗

15、口加载的页面中输入检索条件，单击“确定”按钮，检索条件将送回给父窗口，父窗口根据得到的条件进行检索并且更新页面的显示，同时关闭子窗口。,（a）父窗口（b）输入检索条件,（c）检索结果图6-6 父子窗口交互示例,【例6-11】ex5.html【例6-12】ex6.html,6.2.2 延时生效按钮,延时生效按钮经常会在网站的注册过程中使用到，其作用主要是为了让用户停留几秒钟，仔细阅读使用该网站必须要遵守的协议。,（a）不可用状态（b）可用状态图6-7 延时生效按钮,【例6-13】ex10.html,6.2.3 页面间参数传递,页面之间的参数传递是Web开发中经常需要解决的问题，往往也是导致初学者

16、容易犯错误的问题。传递参数的方法有很多，前面介绍的父子窗口间交互，实际上就是一种参数传递的方法，当然这种方法只能局限于这种有父子关联关系的窗口使用。,还有一种被普遍应用的方法是将参数放置在表单的某个域中，通过页面请求将参数传递到另一个页面。这种方法需要服务器端的配合，数据实际上经过了一个客户端服务器客户端的传递过程。这一节将介绍另外两种页面间传递参数的方法，即利用Cookie和URL传递参数。,1使用Cookie传递参数,Cookie可以在客户端保存少量的用户数据，因此它用于页面间参数传递当然是可行的。使用Cookie传递参数的思路很简单：在一个页面中使用Cookie保存数据，在另一个页面中读

17、取同样的Cookie值。Cookie传递参数的一个典型应用是保存用户登录信息。,图6-8 用户登录界面,【例6-14】ex7.html,（a）登录成功（b）未登录图6-9 用户登录界面,【例6-15】ex8.html,2使用URL传递参数,使用URL进行参数传递是比较常见的做法，URL中问号之后的部分可以作为参数传递的载体，例如：localhost:8021/ex/ex9.html?username=test&password=password 通过解析问号之后的部分（例如：username=test&password=password），即可获取参数的值。,例6-16和例6-17将通过URL

18、传递参数的方式实现网页动态换肤，基本思路是根据URL中的参数选择相应的CSS样式表，最终效果如图6-10所示，其中CSS样式表如例6-16所示。,（a）默认样式（b）蓝色样式图6-10 网页动态换肤效果,【例6-16】CSS样式表【例6-17】ex9.html,6.2.4 检测浏览器及操作系统类型,完成一件工作往往有多种方法，在JavaScript中进行浏览器检测也有多种不同的形式。一种方式是根据navigator对象的userAgent和appVersion属性提供的信息进行判断，另一种方式是通过对象或者属性的存在与否来检测，例如document.all是IE独有的特性，可以作为判断IE浏览器的条件。当然我们也可以同时使用这两种方式，例6-18所示的代码可以获取浏览器、操作系统类型相关的信息。【例6-18】获取浏览器信息,表6-8browser对象属性和方法,小 结,本章介绍了浏览器对象模型（BOM）以及在JavaScript中使用BOM进行浏览器编程的相关技术，并且通过示例详细地说明了BOM在Web开发中的应用。,xiexie!,谢谢！,