JavaScript浏览器对象模型B.ppt

第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对象包含了浏览器本身的信息； （5）screen对象包含了客户端屏幕及渲染能力的信息； （6）history对象包含了浏览器访问网页的历史信息。,除window对象之外，其他的5个对象都是window对象的属性，它们与window对象的关系如图6-1所示。 下面将从window对象开始讨论BOM。,6.1.1 window对象,Window对象表示整个浏览器窗口，但不包括其中的页面内容。 Window对象可以用于移动或者调整其对应的浏览器窗口的大小，或者对它产生其他影响。 在浏览器宿主环境下，window对象就是JavaScript的Global对象，因此使用window对象的属性和方法是不需要特别指明的。 例如我们经常使用的alert方法，实际上完整的调用形式应该是window.alert，通常情况下我们在代码中会省略window对象的声明，直接使用其方法。,window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类： （1）调整窗口的大小和位置； （2）打开新窗口； （3）系统提示框； （4）状态栏控制； （5）定时操作。,1调整窗口的大小和位置,（1）window.moveBy 该方法将浏览器窗口移动指定的距离（相对定位）。 用法：window.moveBy(dx, dy),（2）window.moveTo,该方法将浏览器窗口移动到指定的位置（绝对定位）。 用法：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：窗口的左边缘位置； （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(message),（2）window.confirm,该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。 用户单击“确定”按钮时，window.confirm返回true；单击“取消”按钮时，window.confirm返回false。 用法：window.confirm(message),（3）mpt,该方法将显示一个消息提示框，其中包含一个文本输入框。 用法：mpt(message , default),4状态栏控制,浏览器状态的显示信息可以通过window.status属性直接进行修改。,5定时操作,定时操作通常有两种使用目的，一种是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次，另一种则是将某个操作延时一段时间执行，例如某个特别耗时的操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行不受影响。,（1）window.setInterval,该函数用于设置定时器，每隔一段时间执行指定的代码。 用法：window.setInterval(code, interval) 【例6-1】 timer1.html,（2）window.clearInterval,该函数用于清除setInterval函数设置的定时器。 用法：window.clearInterval(timer) 【例6-2】 counter1.html,（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对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。 由于BOM没有统一的标准，各种浏览器中的document对象特性并不完全相同，因此在使用document对象时需要特别注意，尽量要使用各类浏览器都支持的通用属性和方法。,1通用属性,（1）document.bgColor 该属性为页面的背景色。 （2）document.fgColor 该属性为页面的前景色。,（3）document.linkColor 该属性为页面文档中链接的颜色。 （4）document.vlinkColor 该属性为页面文档中访问过的链接颜色。 （5）document.alinkColor 该属性为页面文档中激活链接的颜色。,（6）document.domain 该属性为文档所在的域名。 （7）document.referrer 该属性为将用户引入当前页面的URL。 （8）document.URL 该属性为当前页面的URL。,（9）document.title 该属性为当前页面的标题。 （10）document.lastModified 该属性为上次修改页面的时间。 （11）document.cookie 该属性用于设置或者读取Cookie的值。,【例6-5】 Cookie存取函数,2集合属性,表6-1 document对象的集合属性,3方法,（1）document.write/writeln 该方法用于在当前文档中输出文字。 用法： document.write(text) document.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-2 location对象属性,表6-3 location对象属性,6.1.4 navigator对象,navigator对象包含了关于Web浏览器的信息，浏览器的类型、版本信息都可以从该对象中获取。 表6-4给出了navigator对象各个属性的含义。,表6-4 navigator对象属性,续表,表6-5 navigator对象属性值示例,6.1.5 screen对象,表6-6 screen对象属性,【例6-6】 screen对象应用示例,6.1.6 history对象,表6-7 history对象属性和方法,6.2 JavaScript浏览器编程示例,在JavaScript中进行浏览器编程通常包括以下几种情况： （1）浏览器窗口的控制； （2）定时操作； （3）页面之间的参数传递； （4）浏览器类型、操作系统类型的判断。 下面将按照以上的应用需求分别介绍相关的示例。,6.2.1 控制浏览器窗口,1打开新窗口 window.open方法的使用方法在前面已经作了说明，然而在实际应用中，仅仅打开一个新的窗口并不能真正解决问题。 考虑一个实际的应用场景：在邮件系统中写新邮件或者回复邮件时，我们一般会在主界面上直接编辑邮件内容，如果邮件还没有编辑完成，我们却需要查看其他邮件，这时就要开启一个新的浏览器窗口继续编辑邮件内容。,当然，我们希望已经编辑的部分能够在新浏览器窗口中保留。 图6-2所示的Gmail邮件系统就具有类似的功能，下面我们将模仿它实现一个简单的示例。,（a）Gmail主界面,（b）在新窗口中编辑邮件 图6-2 Gmail邮件编辑界面,【例6-7】 ex1.html 【例6-8】 ex2.html,2窗口最大化,这里所说的“窗口最大化”并不是指单击浏览器窗口右上角的“最大化”按钮，在正常情况下，浏览器窗口中菜单栏、工具条、地址栏都会占用一些空间，而在一些Web应用中我们希望能够使用最大化的工作区域，而将菜单、工具条等隐藏。,【例6-9】 ex3.html,图6-5 Firefox参数配置界面,【例6-10】 ex4.html,3父子窗口间交互,通过window.open方法打开的窗口一般不是孤立的，它与父窗口通常需要进行数据的交互。 例如很多应用系统都会提供这样的检索功能：在进行比较复杂的检索时，通常会打开一个新的窗口，用户在新窗口加载的页面中输入检索条件，单击“确定”按钮，检索条件将送回给父窗口，父窗口根据得到的条件进行检索并且更新页面的显示，同时关闭子窗口。,（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开发中经常需要解决的问题，往往也是导致初学者容易犯错误的问题。 传递参数的方法有很多，前面介绍的父子窗口间交互，实际上就是一种参数传递的方法，当然这种方法只能局限于这种有父子关联关系的窗口使用。,还有一种被普遍应用的方法是将参数放置在表单的某个域中，通过页面请求将参数传递到另一个页面。这种方法需要服务器端的配合，数据实际上经过了一个客户端服务器客户端的传递过程。 这一节将介绍另外两种页面间传递参数的方法，即利用Cookie和URL传递参数。,1使用Cookie传递参数,Cookie可以在客户端保存少量的用户数据，因此它用于页面间参数传递当然是可行的。 使用Cookie传递参数的思路很简单：在一个页面中使用Cookie保存数据，在另一个页面中读取同样的Cookie值。 Cookie传递参数的一个典型应用是保存用户登录信息。,图6-8 用户登录界面,【例6-14】 ex7.html,（a）登录成功 （b）未登录 图6-9 用户登录界面,【例6-15】 ex8.html,2使用URL传递参数,使用URL进行参数传递是比较常见的做法，URL中问号之后的部分可以作为参数传递的载体，例如： http:/localhost:8021/ex/ex9.html?username=test&password=password 通过解析问号之后的部分（例如：username=test&password=password），即可获取参数的值。,例6-16和例6-17将通过URL传递参数的方式实现网页动态换肤，基本思路是根据URL中的参数选择相应的CSS样式表，最终效果如图6-10所示，其中CSS样式表如例6-16所示。,（a）默认样式 （b）蓝色样式 图6-10 网页动态换肤效果,【例6-16】 CSS样式表 【例6-17】 ex9.html,6.2.4 检测浏览器及操作系统类型,完成一件工作往往有多种方法，在JavaScript中进行浏览器检测也有